@extends($layout)

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{$district->name }}</div>
                
                <div class="card-body">
                    <form id="search-form" class="mb-4" action="{{ route('mediaperson.videos.district', ['district_id' => request()->route('district_id')]) }}" method="GET">
                        <div class="input-group">
                            <div class="form-group col-md-6">
                            <input type="text" class="form-control" name="search" id="search-query" value="{{ request()->input('search') }}" placeholder="Search">
                            </div>
                            <div class="input-group-append" style="margin-left: 1%">
                                <button class="btn btn-primary btn-md" type="submit">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 50 50">
                                        <path fill="#FFFFFF" d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"></path>
                                    </svg>
                                    <span class="d-none d-sm-inline">Search</span>
                                </button>
                                <button class="btn btn-secondary btn-md" type="button" id="filter-toggle">
                                    <i class="ni ni-ui-04"></i>
                                    <span class="d-none d-sm-inline">Filters</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    <div id="filters-section" class="mb-4 p-3 bg-light rounded" style="display: none;">
                        <form id="filters-form" action="{{ route('mediaperson.videos.district', ['district_id' => request()->route('district_id')]) }}" method="GET">
                            <input type="hidden" name="search" id="hidden-search-query" value="{{ request()->input('search') }}">
                            <input type="hidden" name="category" id="hidden-category" value="{{ request()->input('category') }}">
                            <input type="hidden" name="district" id="hidden-district" value="{{ request()->input('district') }}">

                            <div class="form-group">
                                <label for="category">Category</label>
                                <div>
                                    <a href="#" class="btn btn-outline-primary category-btn" data-category="info">Info</a>
                                    <a href="#" class="btn btn-outline-primary category-btn" data-category="news">News</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="district-filter">District</label>
                                <div>
                                    <a href="#" class="btn btn-outline-primary district-btn" data-district="all">All Districts</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="start-date">Start Date</label>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <input type="date" class="form-control" max="2026-09-09" name="start_date" id="start-date" value="{{ request()->input('start_date') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="end-date">End Date</label>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <input type="date" class="form-control" max="2026-09-09" name="end_date" id="end-date" value="{{ request()->input('end_date') }}">
                                    </div>
                                </div>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">Apply Filters</button>
                        </form>
                    </div>
                    
                    <div class="row" id="video-container">
                        @if($videos->isEmpty())
                            <div class="col-12">
                                <p class="text-center">No videos found.</p>
                            </div>
                        @else
                            @foreach ($videos as $video)
                                @php
                                    $date = \Carbon\Carbon::parse($video->created_at);
                                    $timeAgoText = $date->format('F j, Y');
                                    $baseFilename = str_replace('.mp4', '', $video->url);
                                    $thumbnailUrls = [];
                                    for ($i = 0; $i < $video->no_of_thumbnails; $i++) {
                                        $thumbnailUrls[] = Storage::disk('s3_thumbnails')->url(
                                            "{$baseFilename}" . ($video->no_of_thumbnails > 1 ? "-{$i}" : '') . '.jpg',
                                        );
                                    }
                                @endphp
                                <div class="col-12 mb-3">
                                    <a href="{{ url('/media-person/videos/' . $video->id) }}" class="card-link">
                                        <div class="card video-card">
                                            <div class="row no-gutters">
                                                <div class="col-md-4">
                                                    <div class="thumbnail-container">
                                                        @foreach ($thumbnailUrls as $thumbnailUrl)
                                                            <img class="thumbnail-image" src="{{ $thumbnailUrl }}"
                                                                onerror="this.onerror=null; this.src='{{ asset('assets/img/video-thumbnail-placeholder.png') }}';"
                                                                alt="Video Thumbnail" />
                                                        @endforeach
                                                        <img class="play-button"
                                                            src="{{ asset('assets/img/transparent-play-button.png') }}"
                                                            alt="Play Button" />
                                                    </div>
                                                </div>
                                                <div class="col-md-8">
                                                    <div class="card-body">
                                                        <h5 class="card-title">{{ $video->title }}</h5>
                                                        <p style="text" class="card-text">{{ $video->description }}</p>
                                                        <p class="card-text text-muted">{{ $timeAgoText }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    
                    <div class="row">
                        <div class="col-12 text-center">
                            @if ($videos->hasMorePages())
                                <button id="load-more" class="btn btn-primary"
                                    data-next-page="{{ $videos->currentPage() + 1 }}">Load More</button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mt-2">
                <div class="card-body">
                    <h4 class="card-title mb-3">Districts</h4>
                    @foreach ($districts as $d)
                    <a href="{{ route('mediaperson.videos.district', ['district_id' => $d->id]) }}" class="list-group-item list-group-item-action mb-3">
                        {{ $d->name }}
                    </a>
                    <hr class="horizontal dark my-3">
                @endforeach

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var category = ''; 
    var district = '';
    function getQueryParam(param) {
        var urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
    }

    var urlCategory = getQueryParam('category');
    if (urlCategory === 'info' || urlCategory === 'news') {
        category = urlCategory;
        document.querySelector(`.category-btn[data-category="${category}"]`).classList.add('active');
    }

    var urlDistrict = getQueryParam('district');
    if (urlDistrict === 'all') {
        district = 'all';
        document.querySelector(`.district-btn[data-district="${district}"]`).classList.add('active');
    }

    document.getElementById('filter-toggle').addEventListener('click', function() {
        var filtersSection = document.getElementById('filters-section');
        if (filtersSection.style.display === 'none') {
            filtersSection.style.display = 'block';
        } else {
            filtersSection.style.display = 'none';
        }
    });

    document.querySelectorAll('.category-btn').forEach(function(anchor) {
        anchor.addEventListener('click', function(event) {
            event.preventDefault();
            category = this.getAttribute('data-category');
            document.getElementById('hidden-category').value = category;
            document.querySelectorAll('.category-btn').forEach(function(btn) {
                btn.classList.remove('active');
            });
            this.classList.add('active');
        });
    });

    document.querySelectorAll('.district-btn').forEach(function(anchor) {
        anchor.addEventListener('click', function(event) {
            event.preventDefault();
            district = this.getAttribute('data-district');
            document.getElementById('hidden-district').value = district;
            document.querySelectorAll('.district-btn').forEach(function(btn) {
                btn.classList.remove('active');
            });
            this.classList.add('active');
/*             document.getElementById('filters-form').submit(); 
 */        });
    });

    document.getElementById('filters-form').addEventListener('submit', function() {
        document.getElementById('hidden-category').value = category;
        document.getElementById('hidden-district').value = district;
        document.getElementById('hidden-search-query').value = document.getElementById('search-query').value;
    });
</script>

<script>
    $(document).ready(function() {
        function setupThumbnailHover(container) {
            container.find('.thumbnail-container').each(function() {
                const $container = $(this);
                const $images = $container.find('.thumbnail-image');
                let currentIndex = 0;
                let intervalId = null;

                $images.each(function(index) {
                    var img = new Image();
                    img.src = $(this).attr('src');
                    img.onload = function() {
                        if (index === 0) {
                            $container.css('background-image', 'url(' + this.src + ')');
                        }
                    }
                });

                $container.hover(
                    function() { 
                        intervalId = setInterval(() => {
                            $images.eq(currentIndex).hide();
                            currentIndex = (currentIndex + 1) % $images.length;
                            $images.eq(currentIndex).show();
                        }, 1000); 
                    },
                    function() { 
                        clearInterval(intervalId);
                        $images.hide().eq(0).show();
                    }
                );
            });
        }

        setupThumbnailHover($('#video-container'));

        $('#load-more').click(function() {
            var button = $(this);
            var nextPage = button.data('next-page');

            var urlParams = new URLSearchParams(window.location.search);
            var params = {
                page: nextPage
            };
            urlParams.forEach((value, key) => {
                params[key] = value;
            });

            $.ajax({
                url: "{{ route('mediaperson.videos.loadMore', ['district_id' => request()->route('district_id')])}}",
                type: "GET",
                data: params,
                success: function(data) {
                    var html = '';
                    $.each(data.data, function(index, video) {
                        var thumbnails = JSON.parse(video.thumbnails); 
                        var thumbnailImages = thumbnails.map(function(thumbnail) {
                            return '<img class="thumbnail-image" src="' +
                                thumbnail +
                                '" onerror="this.onerror=null; this.src=\'{{ asset('assets/img/video-thumbnail-placeholder.png') }}\';" alt="Video Thumbnail" />';
                        }).join('');

                        html += '<div class="col-12 mb-3">';
                        html += '  <a href="/media-person/videos/' + video.id + '" class="card-link">';
                        html += '    <div class="card video-card">';
                        html += '      <div class="row no-gutters">';
                        html += '        <div class="col-md-4">';
                        html += '          <div class="thumbnail-container">';
                        html += thumbnailImages;
                        html += '            <img class="play-button" src="{{ asset('assets/img/transparent-play-button.png') }}" alt="Play Button" />';
                        html += '          </div>';
                        html += '        </div>';
                        html += '        <div class="col-md-8">';
                        html += '          <div class="card-body">';
                        html += '            <h5 class="card-title">' + video.title + '</h5>';
                        html += '            <p class="card-text">' + video.description + '</p>';
                        html += '            <p class="card-text text-muted">' + video.time_ago_text + '</p>';
                        html += '          </div>';
                        html += '        </div>';
                        html += '      </div>';
                        html += '    </div>';
                        html += '  </a>';
                        html += '</div>';
                    });
                    $('#video-container').append(html);
                    setupThumbnailHover($('#video-container'));

                    if (!data.next_page_url) {
                        button.text('No more videos').prop('disabled', true);
                    } else {
                        button.data('next-page', nextPage + 1);
                    }
                },
                error: function() {
                    alert('Failed to load more videos.');
                }
            });
        });
    });
</script>


<style>
    .video-card {
        border: none;
        border-radius: 0.625rem;
        overflow: hidden;
        transition: transform 0.2s ease-in-out;
        cursor: pointer;
        margin-bottom: 1.25rem; 
    }

    .video-card:hover {
        transform: translateY(-0.625rem); 
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); 
    }

    .thumbnail-container {
        position: relative;
        width: calc(100% - 2.5rem); 
        padding-bottom: 56.25%; 
        background-size: cover;
        background-position: center;
        margin: 0.75rem 1.25rem;
        border-radius: 0.5rem; 
    }

    .thumbnail-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.5s;
        border-radius: 0.5rem; 
    }

    .thumbnail-container:hover .thumbnail-image {
        display: none;
    }

    .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 3.125rem;
        height: 3.125rem; 
        cursor: pointer;
    }

    .card-link {
        text-decoration: none;
        color: inherit;
    }

    .card-link:hover {
        text-decoration: none;
    }
    
</style>
@endsection