@extends('front.layouts.app')

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

    /* Profile Header */
    .profile-header {
        display: flex;
        margin-bottom: 44px;
        gap: 30px;
    }

    .profile-avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
    }

    .profile-info {
        flex: 1;
        color: #fff;
    }

    .profile-stats {
        display: flex;
        gap: 5%;
        margin-bottom: 15px;
    }

    .stat-item {
        text-align: center;
        color: #fff;
    }

    .stat-value {
        font-weight: 600;
        font-size: 1.4em;
        display: block;
    }

    .stat-label {
        color: #fff;
        font-size: 1em;
    }

    .profile-bio .profile-name {
        font-size: 1.5em;
        margin-bottom: 5px;
    }

    .profile-bio .profile-description,
    .profile-bio .profile-email {
        color: #fff;
        margin-bottom: 5px;
    }

    .profile-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .profile-stat {
        text-align: center;
    }

    .profile-stat span:first-child {
        font-weight: 600;
    }

    .profile-bio h1 {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .profile-bio p {
        margin-bottom: 8px;
    }

    /* Profile Navigation */
    .profile-nav {
        border-bottom: 1px solid #dbdbdb;
        display: flex;
        justify-content: center;
        gap: 60px;
        margin-bottom: 44px;
    }

    .profile-nav a {
        text-decoration: none;
        color: #fff;
        padding: 16px 0;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 20px;
    }

    .profile-nav a.active {
        color: #fff;
        border-bottom: 1px solid #fff;
    }

    /* 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 {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }*/

    .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;
        height: 70%;
    }
    
    .video-thumbnail {
        width: 100%;
        height: 400px;
        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;
    }

    /* 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 -->
                <div class="profile-header">
                    <img src="{{ $user->profile_img ? asset('assets/'. $user->profile_img) : asset('assets/front/dummy.jpg') }}"
                        alt="Profile" class="profile-avatar">
                    <div class="profile-info">
                        <div class="profile-stats">
                            <div class="stat-item">
                                <span class="stat-value followers-stats">{{ $user->followers()->count() }}</span>
                                <span class="stat-label">Followers</span>
                            </div>
                            <hr class="" style="rotate: 180deg;color: white;border: 1px solid #ffffff;height: 40px;">
                            <div class="stat-item">
                                <span class="stat-value">{{ $user->following()->count() }}</span>
                                <span class="stat-label">Following</span>
                            </div>
                            <hr class="" style="rotate: 180deg;color: white;border: 1px solid #ffffff;height: 40px;">
                            <div class="stat-item">
                                <span class="stat-value">{{ $reels->count() }}</span>
                                <span class="stat-label">Posts</span>
                            </div>
                        </div>
                        <div class="profile-bio">
                            <h1 class="profile-name">{{ $user->name }}</h1>
                            <p class="profile-description">{{ $user->bio }}</p>
                            <!-- <p class="profile-email">{{ $user->email }}</p> -->
                        </div>
                        <div class="profile-actions">
                            <a class="btn btn-secondary me-2" href="{{ url('/profile-edit') }}">Edit Profile</a>
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">Upload Video</button>

                        </div>
                    </div>
                </div>
                <!-- <div class="profile-header">
                        <img src="{{ $user->profile_img ? asset('assets/'. $user->profile_img) : asset('assets/front/dummy.jpg') }}" alt="Profile" class="profile-avatar">
                        
                        <div class="profile-info">
                            <div class="profile-bio">
                                <h1>{{ $user->name }}</h1>
                                <p>Bio description goes here. This is an example bio for the Instagram profile layout.</p>
                                <p>🌍 Example link: <a href="#">example.com</a></p>
                            </div>
                    
                            <div class="profile-stats">
                                <div class="profile-stat">
                                    <span>{{ $reels->count() }}</span><br>
                                    <span>posts</span>
                                </div>
                                <div class="profile-stat">
                                    <span>{{ $user->followers()->count() }}</span><br>
                                    <span>followers</span>
                                </div>
                                <div class="profile-stat">
                                    <span>{{ $user->following()->count() }}</span><br>
                                    <span>following</span>
                                </div>
                            </div>
                     
                            <div class="d-flex mt-2">
                                <button class="btn btn-outline-secondary me-2">Edit Profile</button>
                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">Upload Video</button>
                            </div>
                        </div>
                    </div> -->

                <!-- Profile Navigation -->
                <nav class="profile-nav">
                    <a href="#" class="nav-link active" data-target="posts">
                        <i class="fas fa-th-large"></i> </a>
                    <a href="#" class="nav-link" data-target="series">
                        <i class="fas fa-layer-group"></i> </a>
                    <a href="#" class="nav-link" data-target="liked">
                        <i class="fas fa-heart"></i> </a>
                    <a href="#" class="nav-link" data-target="private">
                        <i class="fas fa-lock"></i> </a>
                    <a href="#" class="nav-link" data-target="saved">
                        <i class="fas fa-bookmark"></i> </a>
                </nav>

                <div class="posts tab-content active" id="posts">
                    <div class="row">
                        @foreach ($reels as $index => $reel)
                            <!--<div class="col-lg-3 col-md-4 mb-4">-->
                            <!--    <div class="vid-con position-relative">-->
                            <!--        <video class="video-thumbnail"-->
                            <!--            style="width: 55%; height: 195px; cursor: pointer;"-->
                            <!--            data-bs-toggle="modal"-->
                            <!--            data-bs-target="#videoModal"-->
                            <!--            data-index="{{ $index }}"-->
                            <!--            data-video-url="{{ asset('assets/' . $reel->video_path) }}"-->
                            <!--            muted-->
                            <!--            playsinline-->
                            <!--            preload="metadata">-->
                            <!--            <source src="{{ asset('assets/' . $reel->video_path) }}" type="video/mp4">-->
                            <!--            Your browser does not support HTML5 video.-->
                            <!--        </video>-->

                            <!--        <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>-->
                            <!--    </div>-->
                            <!--</div>-->
                            
                            <!--<div class="col-lg-3 col-md-4 mb-4">-->
                            <!--    <div class="video-container position-relative">-->
                            <!--        <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>-->
                            <!--            <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>-->
                            <!--        </a>-->
                            <!--    </div>-->
                            <!--</div>-->
                            <div class="col-lg-3 col-md-4 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>
                                        <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>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="tab-content d-none" id="series">
                    <h3>No series posted Yet.</h3>
                </div>

                <div class="tab-content d-none" id="liked">
                    @if ($likedReels->count() > 0)
                        <div class="row">
                            @foreach ($likedReels as $reel)
                                <div class="col-lg-3 col-md-4 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>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <h3>No Liked Posts Yet.</h3>
                    @endif
                </div>

                <div class="tab-content d-none" id="private">
                    @if ($privateReels->count() > 0)
                        <div class="row">
                            @foreach ($privateReels as $reel)
                                <div class="col-lg-3 col-md-4 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>
                                            <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>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <h3>No Private Posts Yet.</h3>
                    @endif
                </div>
                
                <div class="tab-content d-none" id="saved">
                    @if ($savedReels->count() > 0)
                        <div class="row">
                            @foreach ($savedReels as $reel)
                                <div class="col-lg-3 col-md-4 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>
                                            <div class="video-actions-container position-absolute top-0 end-0 p-2">
                                                <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>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <h3>No Saved Posts Yet.</h3>
                    @endif
                </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>

                    <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>
                            <option value="friends">Friends</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>
                <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>
                        <option value="friends">Friends</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");

    //     // If you want to close the modal via JS after 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();

    //         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 > 13) {
    //                 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);
    //         // VERY IMPORTANT: pass the entire file size so the server
    //         // knows when the final chunk has arrived
    //         formData.append("fileSize", fileSize);

    //         // If needed, pass along caption, hashtags, and CSRF token
    //         // but we already have them in the <form>, so either gather them or handle on the server
    //         let caption = uploadForm.querySelector('textarea[name="caption"]').value;
    //         let hashtags = uploadForm.querySelector('textarea[name="hashtags"]').value;
    //         let privacy = uploadForm.querySelector('select[name="privacy"]').value;

    //         formData.append("caption", caption);
    //         formData.append("hashtags", hashtags);
    //         formData.append("privacy", privacy);

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

    //         try {
    //             let response = await fetch("{{ route('upload-short') }}", {
    //                 method: "POST",
    //                 body: formData,
    //             });
    //             let result = await response.json();

    //             if (result.success) {
    //                 // The server returns how many bytes it has now
    //                 uploadedBytes = result.uploadedBytes;
    //                 updateProgress();

    //                 // If not done, upload next chunk
    //                 if (uploadedBytes < fileSize) {
    //                     await uploadChunk(uploadedBytes);
    //                 } else {
    //                     // All chunks uploaded
    //                     alert("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 {
    //                 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 + "%";
    //     }
    // });
    
    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 > 13) {
                    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('select[name="privacy"]').value;

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

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

            try {
                let response = await fetch("{{ route('upload-short') }}", {
                    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();
        }

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