@extends('front.layouts.app')

@section('content')
<style>
    /* General Styles */
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background-color: #fafafa;
    }

    .main-content {
        background: linear-gradient(136deg, #4373c5, #a8538c);
    }

    .profile-page {
        /* padding: 20px; */
        background: linear-gradient(136deg, #4373c5, #a8538c);
    }

    .profile-container {
        padding: 30px;
        background: none;
        /* border-radius: 8px; */
        /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    }

    /* Profile Header */
    .profile-header {
        display: flex;
        /* align-items: center; */
        margin-bottom: 20px;
    }

    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 30px;
    }

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

    .follow-btn {
        background-color: #e55175;
        color: white;
    }

    .follow-btn.following {
        background-color: #ffffff;
        color: black;
    }

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

    .profile-nav .nav-link {
        display: inline-block;
        padding: 10px 15px;
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        border-bottom: 2px solid transparent;
        font-size: 20px;
    }

    .profile-nav .nav-link.active {
        color: #fff;
        border-bottom-color: #fff;
    }

    /* Post Grid */
    .tab-content.d-none {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

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

    /* Modal Styles */
    .modal-dialog {
        max-width: 800px;
    }

    .reel-player {
        position: relative;
    }

    .reel-video {
        width: 100%;
        height: auto;
    }

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

    /* Responsive Design */
    @media (max-width: 768px) {
        .profile-header {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .profile-avatar {
            margin: 0 0 20px 0;
        }

        .profile-stats {
            justify-content: center;
        }
    }
</style>
<div class="container-fluid profile-page">
    <div class="row">
        <div class="col-md-3">
            @include('front.partials.sidebar')
        </div>

        <div class="col-md-9">
            <div class="profile-container">
                <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-email">{{ $user->email }}</p>
                            <p class="profile-description">{{ $user->bio }}</p>
                        </div>
                        <div class="profile-actions">
                            @if (Auth::check() && Auth::user()->id != $user->id)
                            @if ($isFollowing)
                            <button class="btn btn-secondary follow-btn following"
                                data-user-id="{{ $user->id }}">Following</button>
                            @else
                            <button class="btn btn-warning follow-btn" data-user-id="{{ $user->id }}">Follow</button>
                            @endif
                            <!--<button class="btn btn-primary message-btn">Message</button>-->
                            <button class="btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="#">Report User</a></li>
                                <li><a class="dropdown-item" href="#">Share Profile</a></li>
                            </ul>
                            @endif
                        </div>
                    </div>
                </div>

                <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>
                </nav>

                <div class="tab-content active" id="posts">
                    <div class="row">
                        @foreach ($reels 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>
                </div>

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

                <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">
                                    <video class="reel-video" id="modalVideo" muted loop data-index="">
                                        <source src="" type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                    <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>

                <!-- <div class="tab-content d-none" id="tagged">
                        <h3>No Tagged Posts Yet.</h3>
                    </div> -->
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        // Follow/Unfollow Logic
        $(document).on('click', '.follow-btn', function() {
            const userId = $(this).data('user-id');
            const isFollowing = $(this).hasClass('following');
            const followerCount = $('.followers-stats');
            const url = isFollowing ? '{{ url("/unfollow", ["userId" => "__USER_ID__"]) }}' :
                '{{ url("/follow", ["userId" => "__USER_ID__"]) }}';
            const button = $(this);

            $.ajax({
                url: url.replace('__USER_ID__', userId),
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response);
                    if (isFollowing) {
                        button.removeClass('following').text('Follow');
                        followerCount.html(response.followers);
                    } else {
                        button.addClass('following').text('Following');
                        followerCount.html(response.followers);
                    }
                },
                error: function(error) {
                    console.error('Error:', error);
                }
            });
        });

        // Video Modal Logic
        const videoModal = document.getElementById('videoModal');
        const modalVideo = document.getElementById('modalVideo');
        const modalSource = modalVideo.querySelector('source');
        const thumbnails = document.querySelectorAll('.video-thumbnail');

        thumbnails.forEach(thumb => {
            thumb.addEventListener('click', () => {
                const videoUrl = thumb.getAttribute('data-video-url');
                modalSource.src = videoUrl;
                modalVideo.load();
                modalVideo.play();
            });
        });

        videoModal.addEventListener('hidden.bs.modal', () => {
            modalVideo.pause();
        });

        // Video Controls in Modal
        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');

        videos.forEach((video, index) => {
            const playBtn = playButtons[index];
            const progressBar = progressBars[index];
            const soundBtn = soundButtons[index];

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

            video.addEventListener('timeupdate', () => {
                const progress = (video.currentTime / video.duration) * 100;
                progressBar.value = progress;
            });

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

            soundBtn.addEventListener('click', () => {
                video.muted = !video.muted;
                soundBtn.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');
        });
    });
</script>
@endsection