@extends('front.layouts.app')

@section('content')
<style>
    .container {
        /* max-width: 935px; */
        margin: 0 auto;
        padding: 30px 20px;
    }

    /* Profile Header */
    .series-header {
        display: flex;
        margin-bottom: 10px;
        gap: 30px;
        justify-content: space-between;
        align-items: center;
    }

    /* Post Grid */
    .post-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    .post-item {
        position: relative;
        aspect-ratio: 1/1;
        background-color: #eee;
        cursor: pointer;
    }

    .post-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .post-item:hover::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .upload-short {
        background: #ff1860;
        padding: 15px;
        border-radius: 25px;
        color: white;
        border: none;
        cursor: pointer;
    }

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 600px;
        position: relative;
    }

    .reel-player {
        position: relative;
        height: calc(100vh - 40px);
        margin-bottom: 40px;
        scroll-snap-align: start;
    }

    .reel-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        cursor: pointer;
    }

    .video-controls {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        display: flex;
        align-items: center;
        gap: 15px;
        color: white;
    }

    .control-btn {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 18px;
    }

    .progress-bar-video {
        flex-grow: 1;
        height: 3px;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
    }

    .progress-bar-video::-webkit-slider-thumb {
        appearance: none;
        width: 12px;
        height: 12px;
        background: white;
        border-radius: 50%;
    }

    .close-button {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 20px;
        font-weight: bold;
        color: #000;
        cursor: pointer;
    }

    #uploadForm input[type="file"] {
        margin-bottom: 10px;
    }

    #uploadForm textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        resize: vertical;
    }

    .video-container {
        background-color: #eee;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .add-container{
        border-radius: 8px;
        width: 100%;
        height: 250px;
    }
    
    .video-thumbnail {
        width: 100%;
        height: 250px;
        display: block;
        cursor: pointer;
        object-fit: cover;
    }

    #modalVideo {
        width: 50%;
    }

    #editVideoPreview {
        width: 50%;
    }

    .stat-item {
        display: grid;
        text-align: center;
    }
    
    .video-actions-container {
        background-color: #ffffffc4;
        border-bottom-left-radius: 10px;
    }
    
    .add-video-cont button{
        position: absolute;
        width: 100%;
        height: 250px;
        font-size: 100px;
        background: linear-gradient(180deg, #ff3371, #3b5bb4);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .container {
            padding: 20px 10px;
        }

        .profile-header {
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-left: 40px;
        }

        .profile-stats {
            justify-content: center;
        }

        .post-grid {
            gap: 3px;
        }
    }
</style>

<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-md-3">
            @include('front.partials.sidebar')
        </div>

        <!-- Reels Container -->
        <div class="col-md-9">
            <div class="container">
                <!-- Profile Header -->
                    <form action="{{ url()->previous() }}" class="mb-4" method="GET">
                        @csrf
                        <button type="submit" class="btn btn-light"><i class="fa-solid fa-chevron-left"></i></button>
                    </form>
                <div class="series-header">
                    <!--<a class="btn btn-light" href="{{ route('profile') }}"><i class="fa-solid fa-chevron-left"></i></a>-->
                    <h1 class="text-white">{{ $series->title }}</h1>
                    
                    @if(auth()->user()->id === $series->user_id)
                    <a class="btn btn-light float-inline-end"><i class="fa-solid fa-sliders"></i></a>
                    @endif
                </div>
                <div class="series-desc">
                    <p class="text-white">{{ $series->description }}</p>
                </div>
                
                <div class="posts">
                    <div class="row">
                        @if(auth()->user()->id === $series->user_id)
                        <div class="col-lg-3 col-md-3 mb-4">
                            <div class="add-container position-relative">
                                <div class="add-video-cont">
                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal"><i class="fa-solid fa-plus"></i></button>
                                </div>
                            </div>
                        </div>
                        @endif
                        @foreach ($series->reels as $index => $reel)
                            <div class="col-lg-3 col-md-3 mb-4">
                                <div class="video-container position-relative">
                                    <div>
                                        <a href="{{ route('showReel', $reel->id) }}">
                                            <video class="video-thumbnail"
                                                   preload="metadata"
                                                   oncontextmenu="return false;"
                                                   controlsList="nodownload">
                                                <source src="{{ asset('assets/' . $reel->video_path) }}" type="video/mp4">
                                                Your browser does not support HTML5 video.
                                            </video>
                                        </a>
                                        @if(auth()->user()->id === $series->user_id)
                                        <div class="video-actions-container position-absolute top-0 end-0 p-2">
                                            <button class="video-actions-button btn btn-sm" data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="#" data-action="edit" data-reel-id="{{ $reel->id }}" data-caption="{{ $reel->caption }}" data-hashtags="{{ $reel->hashtags }}" data-privacy="{{ $reel->privacy }}">Edit</a></li>
                                                <li><a class="dropdown-item" href="#" data-action="delete" data-reel-id="{{ $reel->id }}">Delete</a></li>
                                            </ul>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-hidden="true" aria-labelledby="videoModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="videoModalLabel">Play ReeL</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body text-center">
                <div class="reel-player">

                    <!-- Large video player in modal -->
                    <video class="reel-video" id="modalVideo" muted loop data-index="">
                        <source src="" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                    <!-- Video Controls -->
                    <div class="video-controls">

                        <button class="control-btn toggle-play">
                            <i class="fas fa-pause"></i>
                        </button>
                        <input type="range" class="progress-bar-video" value="0" min="0" max="100">
                        <button class="control-btn toggle-sound">
                            <i class="fas fa-volume-mute"></i>
                        </button>
                    </div>
                </div>
            </div>

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

<!-- Bootstrap Modal -->
<div class="modal fade" id="uploadModal" aria-hidden="true" aria-labelledby="uploadModalLabel" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadModalLabel">Upload Video</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- The form we are hooking our JavaScript onto -->
            <form id="uploadForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <!-- Video File Input -->
                    <div class="mb-3">
                        <label class="form-label">Choose Video:</label>
                        <input type="file" class="form-control" id="videoUpload" name="video" accept="video/*" required>
                    </div>
                    
                    <input type="hidden" class="form-control" value="{{ $series->id }}" name="series_id">
                    
                    <input type="hidden" class="form-control" value="public" name="privacy">
                    <!--<div class="mb-3">-->
                    <!--    <label for="privacy" class="form-label">Privacy</label>-->
                    <!--    <select class="form-select" name="privacy" id="privacy">-->
                    <!--        <option value="public">Public</option>-->
                    <!--        <option value="private">Private</option>-->
                    <!--    </select>-->
                    <!--</div>-->

                    <!-- Caption (optional) -->
                    <div class="mb-3">
                        <label class="form-label">Caption:</label>
                        <textarea class="form-control" name="caption" placeholder="Write a caption..."></textarea>
                    </div>

                    <!-- Hashtags (optional) -->
                    <div class="mb-3">
                        <label class="form-label">Hashtags:</label>
                        <textarea class="form-control" name="hashtags" placeholder="#example #tags"></textarea>
                    </div>

                    <!-- Error Message if >13 seconds (example) -->
                    <p id="durationError" class="text-danger" style="display: none;">
                        Video must be 13 seconds or less.
                    </p>

                    <!-- Progress Bar -->
                    <div class="mb-3">
                        <label class="form-label">Upload Progress:</label>
                        <div class="progress">
                            <!-- NOTE: no "progress-bar-animated" class to avoid indefinite animation -->
                            <div id="uploadProgress"
                                class="progress-bar progress-bar-striped bg-primary"
                                role="progressbar"
                                style="width: 0%;">
                                0%
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <!-- Cancel button to close the modal -->
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <!-- Submit triggers our JS code for chunked upload -->
                    <button type="submit" class="btn btn-primary">
                        Start Upload
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editReelModal" tabindex="-1" aria-labelledby="editReelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editReelModalLabel">Edit Reel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="editCaption" class="form-label">Caption</label>
                    <textarea class="form-control" id="editCaption"></textarea>
                </div>
                <div class="mb-3">
                    <label for="editHashtags" class="form-label">Hashtags</label>
                    <input type="text" class="form-control" id="editHashtags">
                </div>
                
                <input type="hidden" class="form-control" value="public" name="privacy">
                <!--<div class="mb-3">-->
                <!--    <label for="editPrivacy" class="form-label">Privacy</label>-->
                <!--    <select class="form-select" id="editPrivacy">-->
                <!--        <option value="public">Public</option>-->
                <!--        <option value="private">Private</option>-->
                <!--    </select>-->
                <!--</div>-->
                <div class="mb-3 text-center">
                    <video id="editVideoPreview" controls></video>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveEditChanges">Save changes</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')

<script>
    // Edit / Delete Video
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.dropdown-item').forEach(item => {
            item.addEventListener('click', function(event) {
                const action = this.dataset.action;
                const reelId = this.dataset.reelId;

                if (action === 'edit') {
                    const caption = this.dataset.caption;
                    const hashtags = this.dataset.hashtags;
                    const privacy = this.dataset.privacy;
                    const videoUrl = this.closest('.vid-con').querySelector('.video-thumbnail').dataset.videoUrl;

                    document.getElementById('editCaption').value = caption;
                    document.getElementById('editHashtags').value = hashtags;
                    document.getElementById('editPrivacy').value = privacy;
                    document.getElementById('editVideoPreview').src = videoUrl;
                    document.getElementById('editVideoPreview').load();

                    document.getElementById('saveEditChanges').dataset.reelId = reelId;

                    const editModal = new bootstrap.Modal(document.getElementById('editReelModal'));
                    editModal.show();
                } else if (action === 'delete') {
                    // Handle delete action
                    console.log(`Delete reel ${reelId}`);
                    const deleteUrl = '{{ url("delete-short", ["reelId" => "__REEL_ID__"]) }}'.replace('__REEL_ID__', reelId);
                    if (confirm("Are you sure you want to delete this reel?")) {
                        fetch(deleteUrl, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}', // Important for Laravel
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then(response => {
                                if (response.ok) {
                                    // Reload the page or remove the reel element
                                    location.reload();
                                } else {
                                    console.error('Delete failed');
                                }
                            });
                    }
                }
            });
        });

        document.getElementById('saveEditChanges').addEventListener('click', function() {
            const reelId = this.dataset.reelId;
            const caption = document.getElementById('editCaption').value;
            const hashtags = document.getElementById('editHashtags').value;
            const privacy = document.getElementById('editPrivacy').value;
            const editUrl = '{{ url("edit-short", ["reelId" => "__REEL_ID__"]) }}'.replace('__REEL_ID__', reelId);
            fetch(editUrl, {
                    method: 'PUT',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        caption: caption,
                        hashtags: hashtags,
                        privacy: privacy
                    })
                })
                .then(response => {
                    if (response.ok) {
                        location.reload();
                    } else {
                        console.error('Edit failed');
                    }
                });
        });
    });

    // Upload Video
    
    document.addEventListener("DOMContentLoaded", function () {
        const uploadForm = document.getElementById("uploadForm");
        const videoUpload = document.getElementById("videoUpload");
        const progressBar = document.getElementById("uploadProgress");
        const durationError = document.getElementById("durationError");

        // Initialize modal instance for closing on success
        const uploadModal = document.getElementById("uploadModal");
        let modalInstance = null;
        if (typeof bootstrap !== 'undefined' && uploadModal) {
            modalInstance = new bootstrap.Modal(uploadModal);
        }

        // Each chunk = 2 MB
        let chunkSize = 2 * 1024 * 1024;
        let file, fileSize, uploadedBytes = 0;

        // On form submit:
        uploadForm.addEventListener("submit", async (event) => {
            event.preventDefault(); // Prevent default form submission

            file = videoUpload.files[0];
            if (!file) {
                toastr.error("Please select a file first.");
                return;
            }

            // Validate duration if you want to limit to 13 seconds
            const video = document.createElement("video");
            video.preload = "metadata";
            video.src = URL.createObjectURL(file);

            video.onloadedmetadata = async function () {
                if (video.duration > 14) {
                    durationError.style.display = "block";
                    return;
                }
                durationError.style.display = "none";

                fileSize = file.size;
                uploadedBytes = 0;

                // Start chunked upload from byte 0
                await uploadChunk(0);
            };
        });

        // Recursive chunk upload
        async function uploadChunk(startByte) {
            // Get the slice of file from startByte to startByte+chunkSize
            const chunk = file.slice(startByte, startByte + chunkSize);

            // Build a FormData object with the chunk + metadata
            const formData = new FormData();
            formData.append("video", chunk);
            formData.append("fileName", file.name);
            formData.append("startByte", startByte);
            formData.append("fileSize", fileSize);

            // If needed, pass along caption, hashtags, and CSRF token
            let caption = uploadForm.querySelector('textarea[name="caption"]').value;
            let hashtags = uploadForm.querySelector('textarea[name="hashtags"]').value;
            let privacy = uploadForm.querySelector('input[name="privacy"]').value;
            let seriesId = uploadForm.querySelector('input[name="series_id"]').value;

            formData.append("caption", caption);
            formData.append("hashtags", hashtags);
            formData.append("privacy", privacy);
            formData.append("series_id", seriesId);

            // In Laravel, you typically need a CSRF token:
            formData.append("_token", "{{ csrf_token() }}");

            try {
                let response = await fetch("{{ route('user.series.storeReel') }}", {
                    method: "POST",
                    body: formData,
                });
                let result = await response.json();

                if (result.success) {
                    uploadedBytes = result.uploadedBytes; // Update the uploaded bytes
                    updateProgress();

                    // If not done, upload next chunk
                    if (uploadedBytes < fileSize) {
                        await uploadChunk(uploadedBytes);
                    } else {
                        // All chunks uploaded
                        toastr.success("Video uploaded successfully!");

                        // Optionally close the Bootstrap modal
                        if (modalInstance) {
                            modalInstance.hide();
                        }

                        // Reset progress bar or do anything else
                        progressBar.style.width = "0%";
                        progressBar.textContent = "0%";

                        // Reload after a short delay
                        setTimeout(() => window.location.reload(), 1000);
                    }
                } else {
                    if (result.error) {
                        // Display all validation errors
                        Object.keys(result.error).forEach((key) => {
                            alert(result.error[key].join(", "));
                        });
                    } else {
                        alert("Upload failed, please try again.");
                    }
                }
            } catch (error) {
                alert("Network error, please try again.");
            }
        }

        // Update the progress bar on each chunk
        function updateProgress() {
            let progress = (uploadedBytes / fileSize) * 100;
            let rounded = Math.floor(progress);

            progressBar.style.width = progress + "%";
            progressBar.textContent = rounded + "%";
        }
    });

    // play video
    document.addEventListener('DOMContentLoaded', function() {
        const videoModal = document.getElementById('videoModal');
        const modalVideo = document.getElementById('modalVideo');
        const modalSource = modalVideo.querySelector('source');

        // Grab all the preview <video> elements with class="video-thumbnail"
        const thumbnails = document.querySelectorAll('.video-thumbnail');

        // When user clicks a thumbnail, open modal and set the large video URL
        thumbnails.forEach((thumb) => {
            thumb.addEventListener('click', () => {
                // Get the video URL from data attribute
                const videoUrl = thumb.getAttribute('data-video-url');
                const vidIndex = thumb.getAttribute('data-index');
                // Set the <source src="...">

                modalSource.src = videoUrl;
                modalVideo.dataset.index = vidIndex;

                // Reload the video in the modal
                modalVideo.load();
                modalVideo.play();
            });
        });

        // When modal is closed, pause/reset the video so it doesn't keep playing
        videoModal.addEventListener('hidden.bs.modal', () => {
            modalVideo.pause();
            // If you want to completely reset the source:
            // modalSource.src = "";
            // modalVideo.load();
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        const videos = document.querySelectorAll('.reel-video');
        const progressBars = document.querySelectorAll('.progress-bar-video');
        const playButtons = document.querySelectorAll('.toggle-play');
        const soundButtons = document.querySelectorAll('.toggle-sound');

        let currentVideoIndex = 0;

        // Auto-play first video on load
        if (videos.length > 0) {
            videos[0].play();
        }
        
        // Toggle play/pause on click
        videos.forEach((video, index) => {
            const playBtn = playButtons[index];

            video.addEventListener('click', () => {
                if (video.paused) {
                    video.play();
                    playBtn.innerHTML = '<i class="fas fa-pause"></i>';
                } else {
                    video.pause();
                    playBtn.innerHTML = '<i class="fas fa-play"></i>';
                }
            });

            playBtn.addEventListener('click', () => {
                if (video.paused) {
                    video.play();
                    playBtn.innerHTML = '<i class="fas fa-pause"></i>';
                } else {
                    video.pause();
                    playBtn.innerHTML = '<i class="fas fa-play"></i>';
                }
            });

            // Update progress bar
            video.addEventListener('timeupdate', () => {
                const progress = (video.currentTime / video.duration) * 100;
                progressBars[index].value = progress;
            });

            // Seek functionality
            progressBars[index].addEventListener('input', (e) => {
                const seekTime = (e.target.value / 100) * video.duration;
                video.currentTime = seekTime;
            });

            // Mute/unmute functionality
            soundButtons[index].addEventListener('click', () => {
                video.muted = !video.muted;
                soundButtons[index].innerHTML = video.muted ?
                    '<i class="fas fa-volume-mute"></i>' :
                    '<i class="fas fa-volume-up"></i>';
            });
        });
        
        // Tab Switching Logic
        $('.profile-nav .nav-link').click(function(e) {
            e.preventDefault();
            const target = $(this).data('target');
            $('.profile-nav .nav-link').removeClass('active');
            $(this).addClass('active');
            $('.tab-content').removeClass('active').addClass('d-none');
            $('#' + target).removeClass('d-none').addClass('active');
        });
    });
    
    document.addEventListener('DOMContentLoaded', function() {
    // Select all save buttons
    const saveButtons = document.querySelectorAll('[data-action="save"]');

    saveButtons.forEach(button => {
        button.addEventListener('click', function() {
            const reelId = this.getAttribute('data-reel-id');
            const saveSpan = this.querySelector('span');
            const saveIcon = this.querySelector('i');  // Select the 'i' tag inside the button

            if (!saveIcon) {
                console.error('Save icon not found.');
                return;  // Exit if the icon is not found
            }

            // Construct the URL dynamically using template literals
            const saveUrl = `{{ url("/save/") }}/${reelId}`;

            // Send AJAX request to the server
            fetch(saveUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}', // CSRF token for security
                },
                body: JSON.stringify({
                    reel_id: reelId, // Send reelId in the request body
                }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update UI based on whether the reel is saved or unsaved
                    if (data.saved) {
                        saveSpan.textContent = data.saved;
                        saveIcon.style.color = 'blue'; // Change icon color when saved
                    } else {
                        saveIcon.style.color = ''; // Reset icon color when unsaved
                    }
                }
            })
            .catch(error => console.error('Error:', error));
        });
    });
});
</script>
@endsection