@extends($layout)

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <div class="container mt-4">
        <div class="card mb-4">
            <div class="card-body">
                <h4 class="card-title mb-3"></h4>
                <div class="owl-carousel owl-theme custom-carousel">
                    @foreach ($recentVideosFromAll->slice(0, 6) as $video)
                        @php
                            $baseFilename = str_replace('.mp4', '', $video->url);
                            $thumbnailUrl = Storage::disk('s3_thumbnails')->url("{$baseFilename}-0.jpg");
                        @endphp
                        <div class="item">
                            <a href="{{ url('/media-person/videos/' . $video->id) }}" class="card-link">
                                <div class="card video-card custom-card-size">
                                    <div class="thumbnail-container">
                                        <img class="thumbnail-image" src="{{ $thumbnailUrl }}"
                                            onerror="this.onerror=null; this.src='{{ asset('assets/img/video-thumbnail-placeholder.png') }}';"
                                            alt="Video Thumbnail" />
                                        <div class="overlay">
                                            <h5 class="overlay-title">{{ $video->title }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-3">Districts</h4>
                        @foreach ($districts as $district)
                            @php
                                $recentVideo = $mostRecentVideos[$district->id] ?? null;
                                $thumbnailUrl =
                                    $recentVideo->thumbnail_url ?? asset('assets/img/video-thumbnail-placeholder.png');
                            @endphp
                            <a href="{{ url()->current() }}/{{ $district->id }}" class="text-decoration-none text-dark">

                                <div class="card mb-3 district-card">
                                    <div class="row g-0">
                                        <div class="col-md-4 d-flex align-items-center justify-content-center">
                                            <div class="ratio ratio-16x9" style="width: 150px; height: 100px;">
                                                <img src="{{ $thumbnailUrl }}" class="img-fluid rounded-start"
                                                    alt="{{ $district->name }}" style="object-fit: cover;">
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="card-body">
                                                <span class="badge bg-primary mb-2">{{ $district->name }}</span>
                                                <h5 class="card-title">{{ $recentVideo->title ?? 'No Videos Yet' }}</h5>
                                                <p class="card-text">{{ $recentVideo->description ?? '' }}</p>
                                                <p class="card-text">
                                                    <small class="text-muted">
                                                        Uploaded on:
                                                        {{ $recentVideo && $recentVideo->created_at ? $recentVideo->created_at->setTimezone('Asia/Kolkata')->format('j F Y') : 'N/A' }}

                                                    </small>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        @endforeach




                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card mt-3">
                    <div class="card-body">
                        <h4 class="card-title mb-3">Recent Videos</h4>
                        @foreach ($recentVideosFromAll as $recentVideo)
                            <div class="mb-2">
                                <h6 class="card-title">
                                    <a href="{{ url('/media-person/videos/' . $recentVideo->id) }}">
                                        {{ $recentVideo->title }}
                                    </a>
                                </h6>
                                <hr class="horizontal dark my-3">
                            </div>
                        @endforeach




                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .district-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .district-card:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .custom-carousel .item {
            max-width: 400px;
            max-height: 250px;
        }

        .custom-card-height {
            max-height: 300px;
            overflow: hidden;
        }

        .thumbnail-container {
            position: relative;
            height: 100%;
        }

        .thumbnail-image {
            width: 100%;
            height: auto;
        }

        .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        .overlay-title {
            margin: 0;
            font-size: 1.2em;
            color: #fff;

        }
    </style>
    <script>
        $(document).ready(function() {
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                autoplay: true,
                autoplayTimeout: 5000,
                center: false,
                items: 3,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 2
                    },
                    1000: {
                        items: 3
                    }
                }
            });
        });
    </script>
@endsection