@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"></div>

                    <div class="row">
                        <div class="col-12 text-end">

                            <a href="/stringer/my-videos" class="btn bg-gradient-dark mb-0 me-4"><i class="fas  fa-chevron-circle-left"></i>
                                &nbsp;&nbsp;My Videos
                            </a>
                          
                            
                          

                        </div>
                    </div>

                    <div class="card-body">
                        <video width="100%" height="100%" controls>
                            <source src="{{ $video->signedUrl }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>

                        <h3>{{ $video->title }}</h3>
                        <p>{{ $video->description }}</p>
                        <p><strong>Uploaded on:</strong> {{ $video->uploaded_on }}</p>
                        <p><strong id="view-count">{{ number_format($video->views) }}</strong> views</p>



                    </div>
                </div>
                <div class="card mt-4">

                    <div class="card-body">
                        <h3>Associated Images</h3>
                        <div class="row">
                            @if ($associatedImages->isEmpty())
                                <p>No associated images available.</p>
                            @else
                                @foreach ($associatedImages as $image)
                                    <div class="col-md-3 mb-3">
                                        <a href="{{ $image['signed_url'] }}" data-lightbox="associated-images"
                                            data-title="Associated Image">
                                            <img src="{{ $image['signed_url'] }}" alt="Associated Image" class="img-fluid">
                                        </a>
                                    </div>
                                @endforeach
                            @endif

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<script>
    $(document).ready(function() {
        $.ajax({
            url: '{{ route("videos.increment-views", $video->id) }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if(response.success) {
                    let viewCount = parseInt($('#view-count').text().replace(/,/g, '')) + 1;
                    $('#view-count').text(number_format(viewCount));
                }
            }
        });
    });

    function number_format(number) {
        return new Intl.NumberFormat().format(number);
    }
</script>
    
@endsection