@extends('front.layouts.app')

@section('content')
<style>
    .container-fluid {
        background: linear-gradient(160deg, #0a58ca99, #ff3371b5);
    }

    .reels-container {
        overflow-y: auto;
        /* height: 100vh; */
        /* background: #000; */
    }

    .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;
    }

    .reel-controls {
        position: absolute;
        right: 20px;
        bottom: 75px;
        display: flex;
        flex-direction: column;
        gap: 25px;
        color: #fff;
    }

    .icon-button {
        background: #ada6a680;
        border: none;
        color: #fff;
        border-radius: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 15px;
        font-size: 18px;
        cursor: pointer;
    }
    
    .icon-button:hover{
        background: #ada6a680;
    }

    .reel-profile a {
        background: #ada6a680;
        padding: 5px 10px;
        border-radius: 25px;
    }

    .view-count {
        position: absolute;
        bottom: 30px;
        right: 20px;
        color: #fff;
        font-size: 14px;
    }

    .reel-profile {
        position: absolute;
        left: 20px;
        bottom: 75px;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
    }

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

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

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

    .control-btn {
        background: #ffffff7d;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 18px;
        padding: 5px 10px;
        border-radius: 25px;
    }

    .reels-container {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
        overflow-y: auto;
    }

    .reels-container::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .nav-arrows {
        position: fixed;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .arrow-btn {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        backdrop-filter: blur(5px);
        transition: all 0.3s ease;
    }

    .arrow-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    .arrow-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
</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 p-0">
            <div class="reels-container">

                @foreach ($reels as $index => $reel)
                <div class="reel-player">
                    <video class="reel-video" muted loop autoplay data-index="{{ $index }}">
                        <source src="{{ asset('assets/'.$reel['video_path']) }}" type="video/mp4">
                    </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" value="0" min="0" max="100">
                        <button class="control-btn toggle-sound">
                            <i class="fas fa-volume-mute"></i>
                        </button>
                    </div>

                    <!-- Like, Comment, Share Buttons -->
                    <div class="reel-controls">
                        <button class="icon-button like-btn" data-reel-id="{{ $reel->id }}">
                            @if($reel->likes()->where('user_id', auth()->id())->exists())
                            <i class="fas fa-heart" style="color: red;"></i>
                            @else
                            <i class="fas fa-heart"></i>
                            @endif
                            <span>{{ $reel->likes()->count() }}</span>
                        </button>
                        <a class="icon-button comment-btn text-decoration-none" href="{{ route('showReel', $reel->id) }}">
                            <i class="fas fa-comment"></i> <span>{{ $reel->comments()->count() }}</span>
                        </a>
                        <button class="btn btn-sm icon-button save-report-btn" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <button class="dropdown-item" data-action="save" data-reel-id="{{ $reel->id }}">
                                    @if($reel->usersWhoSaved()->where('user_id', auth()->id())->exists())
                                        <i class="fas fa-bookmark" style="color: blue;"></i> 
                                        <span> Saved</span>
                                    @else
                                        <i class="fas fa-bookmark"></i>
                                        <span> Save</span>
                                    @endif
                                </button>
                            </li>
                            <li>
                                <button class="dropdown-item" href="#" data-action="reportVideo" data-reel-id="{{ $reel->id }}" data-bs-toggle="modal" data-bs-target="#reportModal">
                                   Report Video
                                </button>
                            </li>
                        </ul>
                    </div>

                    {{-- <span class="view-count">👁️ {{ $reel['views'] }} views</span> --}}
                    <div class="reel-profile">
                        <img class="profile_img" src="{{ $reel->user->profile_img ? asset('assets/'. $reel->user->profile_img) : asset('assets/front/dummy.jpg') }}" alt="Profile">
                        <a class="text-decoration-none text-white" href="{{ route('viewUser', $reel->user->id) }}">{{ $reel->user->username }}</a>
                    </div>
                </div>
                @endforeach
                <div class="nav-arrows">
                    <button class="arrow-btn" id="arrow-up" disabled>
                        <i class="fas fa-chevron-up"></i>
                    </button>
                    <button class="arrow-btn" id="arrow-down">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Report Video Modal -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">Report Video</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="reportForm">
                    <div class="mb-3">
                        <label for="reportStatement" class="form-label">Choose a reason or write your own:</label>
                        <select class="form-select" id="reportStatement" name="reportStatement">
                            <option value="Inappropriate content">Inappropriate content</option>
                            <option value="Spam">Spam</option>
                            <option value="Harassment">Harassment</option>
                            <option value="Misinformation">Misinformation</option>
                            <option value="Copyright violation">Copyright violation</option>
                            <option value="Other">Other (please specify)</option>
                        </select>
                    </div>

                    <div class="mb-3" id="customStatementDiv" style="display:none;">
                        <label for="customStatement" class="form-label">Custom Reason:</label>
                        <textarea class="form-control" id="customStatement" name="customStatement" rows="3"></textarea>
                    </div>

                    <button type="submit" class="btn btn-danger">Report</button>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    // document.addEventListener('DOMContentLoaded', function() {
    //     const videos = document.querySelectorAll('.reel-video');
    //     const progressBars = document.querySelectorAll('.progress-bar');
    //     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();
    // }

    // // Configure Intersection Observer for auto-play
    // const observer = new IntersectionObserver((entries) => {
    //     entries.forEach(entry => {
    //         const video = entry.target;
    //         if (entry.isIntersecting) {
    //             video.play();
    //             updateViewCount(video);
    //             currentVideoIndex = parseInt(video.dataset.index);
    //         } else {
    //             video.pause();
    //         }
    //     });
    // }, {
    //     threshold: 0.8
    // });

    // // Observe all videos
    // videos.forEach(video => observer.observe(video));

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

    // function updateViewCount(video) {
    //     const index = video.dataset.index;
    //     const viewCount = document.querySelectorAll('.view-count')[index];

    //     if (!video.dataset.viewed) {
    //         video.dataset.viewed = true;
    //         const currentViews = parseInt(viewCount.textContent.match(/\d+/)[0]);
    //         viewCount.textContent = `👁️ ${currentViews + 1} views`;
    //     }
    // }
    // });

    // document.addEventListener('DOMContentLoaded', function() {
    //     const videos = document.querySelectorAll('.reel-video');
    //     const reelContainer = document.querySelector('.reels-container');
    //     const arrowUp = document.getElementById('arrow-up');
    //     const arrowDown = document.getElementById('arrow-down');
    //     let currentVideoIndex = 0;

    //     // Initialize arrows
    //     updateArrows();

    //     // Arrow click handlers
    //     arrowUp.addEventListener('click', () => navigateReels(-1));
    //     arrowDown.addEventListener('click', () => navigateReels(1));

    //     function navigateReels(direction) {
    //         const newIndex = currentVideoIndex + direction;
    //         if (newIndex >= 0 && newIndex < videos.length) {
    //             currentVideoIndex = newIndex;
    //             videos[currentVideoIndex].scrollIntoView({
    //                 behavior: 'smooth',
    //                 block: 'start'
    //             });
    //             updateArrows();
    //         }
    //     }

    //     function updateArrows() {
    //         arrowUp.disabled = currentVideoIndex === 0;
    //         arrowDown.disabled = currentVideoIndex === videos.length - 1;
    //     }

    //     // Handle wheel events
    //     let isScrolling = false;
    //     reelContainer.addEventListener('wheel', function(e) {
    //         if (!isScrolling) {
    //             isScrolling = true;
    //             const direction = e.deltaY > 0 ? 1 : -1;
    //             navigateReels(direction);
    //             setTimeout(() => { isScrolling = false }, 1000);
    //         }
    //     }, { passive: true });

    //     // Update current video index on scroll
    //     const observer = new IntersectionObserver((entries) => {
    //         entries.forEach(entry => {
    //             if (entry.isIntersecting) {
    //                 currentVideoIndex = parseInt(entry.target.dataset.index);
    //                 updateArrows();
    //             }
    //         });
    //     }, { threshold: 0.5 });

    //     videos.forEach(video => observer.observe(video));
    // });

    document.addEventListener('DOMContentLoaded', function() {
        const videos = document.querySelectorAll('.reel-video');
        const progressBars = document.querySelectorAll('.progress-bar');
        const playButtons = document.querySelectorAll('.toggle-play');
        const soundButtons = document.querySelectorAll('.toggle-sound');
        const reelContainer = document.querySelector('.reels-container');
        const arrowUp = document.getElementById('arrow-up');
        const arrowDown = document.getElementById('arrow-down');

        let currentVideoIndex = 0;
        let isPlayingAll = false; // Flag to track if playing all videos

        // Initialize first video
        if (videos.length > 0) {
            videos[0].play();
            updatePlayButton(0, false);
        }

        // Intersection Observer for view count and current index
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                const video = entry.target;
                if (entry.isIntersecting) {
                    video.play();
                    // updateViewCount(video);
                    currentVideoIndex = parseInt(video.dataset.index);
                } else {
                    video.pause();
                }
            });
        }, {
            threshold: 0.8
        });

        videos.forEach(video => observer.observe(video));

        // Toggle play/pause and play all logic
        playButtons.forEach((playBtn, index) => {
            playBtn.addEventListener('click', () => {
                const video = videos[index];
                if (video.paused) {
                    video.play();
                    updatePlayButton(index, false);
                } else {
                    video.pause();
                    updatePlayButton(index, true);
                }
            });
        });

        // Handle video end for sequential playback
        videos.forEach((video, index) => {
            video.addEventListener('ended', () => {
                if (isPlayingAll) {
                    const nextIndex = index + 1;
                    if (nextIndex < videos.length) {
                        videos[nextIndex].scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                        videos[nextIndex].play();
                        updatePlayButton(nextIndex, false);
                    } else {
                        isPlayingAll = false;
                        updatePlayButton(index, true);
                    }
                }
            });
        });

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

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

            // Synchronize mute/unmute across all videos
            soundButtons[index].addEventListener('click', () => {
                const isMuted = !videos[index].muted; // Get the new muted state
                videos.forEach(video => {
                    video.muted = isMuted; // Apply the same muted state to all videos
                });
                soundButtons.forEach(button => {
                    button.innerHTML = isMuted ?
                        '<i class="fas fa-volume-mute"></i>' :
                        '<i class="fas fa-volume-up"></i>';
                });
            });

            // Play/pause on video click
            video.addEventListener('click', () => {
                if (video.paused) {
                    video.play();
                    updatePlayButton(index, false);
                } else {
                    video.pause();
                    updatePlayButton(index, true);
                }
            });
        });

        // Update view count
        // function updateViewCount(video) {
        //     const index = video.dataset.index;
        //     const viewCount = document.querySelectorAll('.view-count')[index];
        //     if (!video.dataset.viewed) {
        //         video.dataset.viewed = true;
        //         const currentViews = parseInt(viewCount.textContent.match(/\d+/)[0]);
        //         viewCount.textContent = `👁️ ${currentViews + 1} views`;
        //     }
        // }

        // Navigation arrows
        updateArrows();
        arrowUp.addEventListener('click', () => navigateReels(-1));
        arrowDown.addEventListener('click', () => navigateReels(1));

        function navigateReels(direction) {
            const newIndex = currentVideoIndex + direction;
            if (newIndex >= 0 && newIndex < videos.length) {
                currentVideoIndex = newIndex;
                videos[currentVideoIndex].scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
                updateArrows();
            }
        }

        function updateArrows() {
            arrowUp.disabled = currentVideoIndex === 0;
            arrowDown.disabled = currentVideoIndex === videos.length - 1;
        }

        // Wheel event handling
        let isScrolling = false;
        reelContainer.addEventListener('wheel', function(e) {
            if (!isScrolling) {
                isScrolling = true;
                const direction = e.deltaY > 0 ? 1 : -1;
                navigateReels(direction);
                setTimeout(() => {
                    isScrolling = false
                }, 1000);
            }
        }, {
            passive: true
        });

        // Update current video index on scroll
        const scrollObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    currentVideoIndex = parseInt(entry.target.dataset.index);
                    updateArrows();
                }
            });
        }, {
            threshold: 0.5
        });

        videos.forEach(video => scrollObserver.observe(video));

        // Update play button icon
        function updatePlayButton(index, isPaused) {
            const playBtn = playButtons[index];
            playBtn.innerHTML = isPaused ? '<i class="fas fa-play"></i>' : '<i class="fas fa-pause"></i>';
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        const likeButtons = document.querySelectorAll('.like-btn');

        likeButtons.forEach(button => {
            button.addEventListener('click', function() {
                const reelId = this.getAttribute('data-reel-id');
                const likeCountSpan = this.querySelector('span');
                const likeIcon = this.querySelector('i');

                // Toggle like state
                // const isLiked = likeIcon.classList.contains('liked');
                const likeUrl = '{{ url("/like", ["reelId" => "__REEL_ID__"]) }}'.replace('__REEL_ID__', reelId);
                // Send AJAX request to the server
                fetch(likeUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Update UI

                            // likeIcon.classList.toggle('liked');
                            likeCountSpan.textContent = data.likes;
                            if (data.liked) {
                                likeIcon.style.color = 'red'; // Red heart if liked
                            } else {
                                likeIcon.style.color = ''; // Default heart if unliked
                            }
                        }
                    })
                    .catch(error => console.error('Error:', error));
            });
        });
    });
    
    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
                        saveSpan.textContent = data.saved;
                    }
                }
            })
            .catch(error => console.error('Error:', error));
        });
    });
});

document.addEventListener('DOMContentLoaded', function () {
    // Triggering the modal form with the report video button
    const reportButtons = document.querySelectorAll('[data-action="reportVideo"]');

    reportButtons.forEach(button => {
        button.addEventListener('click', function () {
            const reelId = this.getAttribute('data-reel-id');
            // Store the reel ID for form submission
            document.getElementById('reportForm').setAttribute('data-reel-id', reelId);
        });
    });

    // Show custom statement textarea when "Other" is selected
    document.getElementById('reportStatement').addEventListener('change', function () {
        const customStatementDiv = document.getElementById('customStatementDiv');
        if (this.value === 'Other') {
            customStatementDiv.style.display = 'block';
        } else {
            customStatementDiv.style.display = 'none';
        }
    });

    // Handle form submission (report)
    document.getElementById('reportForm').addEventListener('submit', function (e) {
        e.preventDefault();

        const reelId = this.getAttribute('data-reel-id');
        const reportStatement = document.getElementById('reportStatement').value;
        const customStatement = document.getElementById('customStatement').value;

        // Use the appropriate report statement
        const reportText = reportStatement === 'Other' ? customStatement : reportStatement;

        // Send AJAX request to the server to store the report
        fetch(`{{ url('/report-video') }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({
                reel_id: reelId,
                report: reportText,
            }),
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Thank you for reporting. We care about our users, we will review the report and take action as soon as possible.');
                    // Close the modal after reporting
                    var modal = bootstrap.Modal.getInstance(document.getElementById('reportModal'));
                    modal.hide();
                } else {
                    alert('There was an error with your report.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('There was an error with your report.');
            });
    });
});


    
</script>
@endsection