@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">
                            @hasanyrole('admin')
                                <a href="/clipmail/videos/" class="btn bg-gradient-dark mb-0 me-4">
                                    <i class="fas fa-chevron-circle-left"></i>
                                    &nbsp;&nbsp;Go back
                                </a>
                            @endhasanyrole
                            @hasanyrole('dio')
                                <a href="/dio/clipmail/videos/" class="btn bg-gradient-dark mb-0 me-4">
                                    <i class="fas fa-chevron-circle-left"></i>
                                    &nbsp;&nbsp;Go back
                                </a>
                            @endhasanyrole
                            @hasrole('Stringer')
                                <a href="/stringer/my-videos/" class="btn bg-gradient-dark mb-0 me-4">
                                    <i class="fas fa-chevron-circle-left"></i>
                                    &nbsp;&nbsp;Go back
                                </a>
                            @endhasrole
                            @hasrole('Media Person')
                                <a href="javascript:void(0);" class="btn bg-gradient-dark mb-0 me-4"
                                    onclick="window.history.back();">
                                    <i class="fas fa-chevron-circle-left"></i>
                                    &nbsp;&nbsp;Go back
                                </a>
                            @endhasrole
                        </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>
                        @unlessrole('Media Person')
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <div>
                                    @if ($video->status === 1)
                                        <span class="badge badge-pill badge-lg bg-gradient-success">Approved</span>
                                    @elseif ($video->status === 0)
                                        <span class="badge bg-gradient-info">Pending for Approval</span>
                                    @endif
                                </div>

                                @hasanyrole('dio|admin')
                                    @if ($video->status === 0)
                                        <form action="{{ route('videos.approve', $video) }}" method="POST">
                                            @csrf
                                            <button type="submit" name="action" value="approve"
                                                class="btn btn-success">Approve</button>
                                        </form>
                                    @endif
                                @endhasanyrole
                            </div>
                        @endunlessrole

                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show mt-2" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        @hasanyrole('admin|dio')
                            <div class="mt-2 mb-3">
                                <a href="{{ route('mediaperson.videos.download', $video) }}"
                                    class="btn bg-gradient-info mb-0 me-4" data-video-id="{{ $video->id }}"
                                    id="downloadBtn">
                                    <i class="fas fa-download"></i>
                                    &nbsp;&nbsp;Download

                                </a>

                                <button id="cancelBtn" class="btn bg-gradient-danger mb-0 me-4 d-none">
                                    <i class="fas fa-times-circle"></i>
                                    &nbsp;&nbsp;Cancel Download
                                </button>
                                {{$formattedSize}}

                                <div class="d-none pb-4" id="downloadStatus">


                                    <div class="progress mt-3">
                                        <div id="progressBar" class="progress-bar bg-gradient-success" role="progressbar"
                                            style="width: 0%; height: 30px;" aria-valuenow="0" aria-valuemin="0"
                                            aria-valuemax="100">
                                            0%
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endhasanyrole

                        @hasrole('Media Person')
                            <div class="text-end mb-3">
                                {{$formattedSize}}
                                <a href="{{ route('mediaperson.videos.download', $video) }}"
                                    class="btn bg-gradient-info mb-0 me-4" data-video-id="{{ $video->id }}"
                                    id="downloadBtn">
                                    <i class="fas fa-download"></i>
                                    &nbsp;&nbsp;Download

                                </a>
                                <button id="cancelBtn" class="btn bg-gradient-danger mb-0 me-4 d-none">
                                    <i class="fas fa-times-circle"></i>
                                    &nbsp;&nbsp;Cancel Download
                                </button>
                                <div class="d-none pb-4" id="downloadStatus">


                                    <div class="progress mt-3">
                                        <div id="progressBar" class="progress-bar bg-gradient-success" role="progressbar"
                                            style="width: 0%; height: 30px;" aria-valuenow="0" aria-valuemin="0"
                                            aria-valuemax="100">
                                            0%
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endhasrole



                        <h3>{{ $video->title }}</h3>
                        <p class="pb-2">{{ $video->description }}</p>
                        <p><strong>Uploaded on:</strong> {{ $video->uploaded_on }}</p>
                        @unless(auth()->user()->hasRole('Media Person'))
                        <p><strong id="view-count">{{ number_format($video->views) }}</strong> views</p>
                        @if ($video->tags->isNotEmpty())
                            <p><strong>Tags:</strong></p>
                            <div class="pb-2">
                                @foreach ($video->tags as $tag)
                                    <span class="badge bg-gradient-secondary">{{ $tag->name }}</span>
                                @endforeach
                            </div>
                        @endif
                        @endunless

                        @if ($video->participants->isNotEmpty())
                            <p><strong>Participants:</strong></p>
                            <div class="pb-2">
                                @foreach ($video->participants as $participant)
                                    <span class="badge bg-gradient-secondary">{{ $participant->name }}</span>
                                @endforeach
                            </div>
                        @endif




                    </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);
        }

        let xhr;

        document.getElementById('downloadBtn').addEventListener('click', function(e) {
            e.preventDefault();

            const downloadBtn = this;
            const cancelBtn = document.getElementById('cancelBtn');
            const progressBar = document.getElementById('progressBar');
            const downloadUrl = this.href;
            const videoId = this.getAttribute('data-video-id');

            // Disable the download button
            downloadBtn.classList.add('disabled');
            downloadBtn.setAttribute('disabled', true);

            cancelBtn.classList.remove('d-none');
            document.getElementById('downloadStatus').classList.remove('d-none');

            fetch(`/videos/${videoId}/file-size`)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        console.error(data.error);
                        return;
                    }

                    const totalSize = data.fileSize;

                    xhr = new XMLHttpRequest();
                    xhr.open('GET', downloadUrl, true);
                    xhr.responseType = 'blob';

                    xhr.onprogress = function(event) {
                        const percentComplete = (event.loaded / totalSize) * 100;

                        progressBar.style.width = percentComplete + '%';
                        progressBar.setAttribute('aria-valuenow', Math.round(percentComplete));
                        progressBar.textContent = Math.round(percentComplete) + '%';
                    };

                    xhr.onload = function() {
                        if (this.status === 200) {
                            const blob = new Blob([this.response], {
                                type: 'video/mp4'
                            });
                            const url = window.URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.style.display = 'none';
                            a.href = url;
                            a.download = 'download.mp4';
                            document.body.appendChild(a);
                            a.click();
                            window.URL.revokeObjectURL(url);

                            downloadBtn.classList.remove('disabled');
                            downloadBtn.removeAttribute('disabled');
                            progressBar.style.width = '100%';
                            progressBar.setAttribute('aria-valuenow', 100);
                            progressBar.textContent = '100%';
                        }
                    };

                    xhr.onerror = function() {
                        console.error('An error occurred while downloading the video.');

                        downloadBtn.classList.remove('disabled');
                        downloadBtn.removeAttribute('disabled');
                        progressBar.style.width = '0%';
                        progressBar.setAttribute('aria-valuenow', 0);
                        progressBar.textContent = '0%';
                    };

                    xhr.send();
                })
                .catch(error => {
                    console.error('Error fetching file size:', error);

                    downloadBtn.classList.remove('disabled');
                    downloadBtn.removeAttribute('disabled');
                    progressBar.style.width = '0%';
                    progressBar.setAttribute('aria-valuenow', 0);
                    progressBar.textContent = '0%';
                });
        });

        document.getElementById('cancelBtn').addEventListener('click', function() {
        /* if (xhr) { */
            xhr.abort();
            console.log(xhr)
        /* } */
        resetDownload();
    });

    function resetDownload() {
        const downloadBtn = document.getElementById('downloadBtn');
        const progressBar = document.getElementById('progressBar');
        const cancelBtn = document.getElementById('cancelBtn');

        downloadBtn.classList.remove('disabled');
        downloadBtn.removeAttribute('disabled');
        progressBar.style.width = '0%';
        progressBar.setAttribute('aria-valuenow', 0);
        progressBar.textContent = '0%';
        cancelBtn.classList.add('d-none');
        document.getElementById('downloadStatus').classList.add('d-none');
    }

    </script>

@endsection