@extends('layouts.app')

@section('title', trans('lang.profile_page'))
@section('content')
<section class="page-section section">
    <div class="container">
        <div class="row">
            <div class="col-11 ms-auto me-auto">

                <!-- PROFILE BOX -->
                <div class="profile-box comman-box">
                    <div class="box-inner">
                        <div class="box-content d-flex align-items-center">

                            <!-- Profile Image -->
                            <div class="profile-image me-4">
                                <figure style="position: relative;">
                                    <img src="{{ $userData['profilePic'] ? $userData['profilePic'] : asset('images/default_icon_user.png') }}"
                                         alt="{{ __('lang.profile_picture') }}" class="avatar-img">
                                    
                                    <!-- Edit Button -->
                                    <button class="btn-icon avatar-edit" 
                                            style="position:absolute; bottom:10px; right:10px;">
                                        <i class="fa-solid fa-pen"></i>
                                    </button>
                                </figure>
                            </div>

                            <!-- User Info -->
                            <div class="profile-content-details w-100">

                                <div class="profile-content d-flex align-items-center justify-content-between">
                                    <h5 class="mb-0 text-white">
                                        {{ $userData['firstName'] ?? '' }} {{ $userData['lastName'] ?? '' }}
                                    </h5>

                                    <!-- Verification Badge -->
                                    @if($userData['isVerify'])
                                        <button type="button" class="btn-default bg-success text-white" style="background-color: #198754 !important;  color: #ffffff !important; cursor: default !important;">
                                            <i class="fa-regular fa-circle-check pe-2"></i>{{ __('lang.verified') }}
                                        </button>
                                    @else
                                        <button type="button" class="btn-default bg-white text-danger"  style="background-color: #FFF !important;  color: #dc3545 !important;cursor: default !important; ">
                                            <i class="fa-regular fa-circle-xmark pe-2"></i>{{ __('lang.unverified') }}
                                        </button>
                                    @endif
                                </div>

                                <!-- Details -->
                                <div class="profile-content-details-inner">

                                    <div class="detail-item">
                                        <p class="mb-2">{{ __('lang.member_since') }}</p>
                                        <p class="mb-0">
                                            @if(isset($userData['createdAt']))
                                                {{ date('F Y', strtotime($userData['createdAt'])) }}
                                            @else
                                                {{ __('lang.not_available') }}
                                            @endif
                                        </p>
                                    </div>

                                    <div class="detail-item">
                                        <p class="mb-2">{{ __('lang.rides_taken') }}</p>
                                        <p class="mb-0" id="takenRides">00</p>
                                    </div>

                                    <div class="detail-item">
                                        <p class="mb-2">{{ __('lang.rides_published') }}</p>
                                        <p class="mb-0" id="publishedRides">00</p>
                                    </div>

                                    <div class="detail-item">
                                        <p class="mb-2">{{ __('lang.rating') }}</p>
                                        <p class="mb-0">
                                            <span class="text-yellow-400 mr-1">★</span>
                                            <span id="profileRating">{{ $userData['reviewCount'] > 0 ? number_format($userData['reviewSum'] / $userData['reviewCount'], 1) : '0.0' }}</span>
                                            | 
                                            <span class="text-orange-400 underline cursor-pointer hover:text-orange-300 transition-colors" id="viewAllProfileReviews">
                                                <span id="profileReviewCount">{{ $userData['reviewCount'] }}</span> {{ __('lang.ratings') }}
                                            </span>
                                        </p>
                                    </div>

                                </div>
                            </div>

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

                <!-- TABS -->
                <div class="tab-page-box">

                    <div class="nav-tabs for-ride-tab border-0 outline-none search-tabs" role="tablist">
                        <button type="button" class="profile-tab for-ride-tab-type " data-tab="account"><span class="list-name text-uppercase">{{ __('lang.account') }}</span></button>
                        <button type="button" class="profile-tab for-ride-tab-type " data-tab="verification"><span class="list-name text-uppercase">{{ __('lang.verification') }}</span></button>
                        <button type="button" class="profile-tab for-ride-tab-type " data-tab="payment"><span class="list-name text-uppercase">{{ __('lang.withdrawal_methods') }}</span></button>
                        <button type="button" class="profile-tab for-ride-tab-type " data-tab="vehicles"><span class="list-name text-uppercase">{{ __('lang.my_vehicles') }}</span></button>
                        <button type="button" class="profile-tab for-ride-tab-type " data-tab="preferences"><span class="list-name text-uppercase">{{ __('lang.travel_preferences') }}</span></button>
                     

                    </div>
@include('profile.components.account')
@include('profile.components.verification')
@include('profile.components.payment')
 @include('profile.components.vehicle')
  @include('profile.components.preferences')
                 
                </div>

            </div>
        </div>
    </div>
</section>
<div class="modal" id="reviewsModal">
    <div class="modal-content" style="max-width: 500px; width: 92%;">
        <div class="modal-header">
            <h3>{{ __('lang.reviews') }}</h3>
            <button class="modal-close-btn" id="closeReviewsModal">&times;</button>
        </div>
        
        <div class="modal-body" style="max-height: 65vh; overflow-y: auto; padding: 1.5rem;">
            <div id="reviewsSummary" class="text-center mb-4 text-gray-300 font-medium"></div>
            
            <div id="reviewsList">
                <div class="text-center py-8 text-gray-400" id="reviewsLoading">
                    {{ __('lang.loading') }}...
                </div>
            </div>
        </div>
        
        <div class="modal-footer">
            <button class="btn btn-secondary modal-close-btn" id="closeReviewsModalBtn">
                {{ __('lang.close') }}
            </button>
        </div>
    </div>
</div>
<style>
.review-stars-display {
  direction: rtl; /* Important: makes stars fill from right to left */
  font-size: 1.6rem; /* Adjust size as needed */
  unicode-bidi: bidi-override;
  white-space: nowrap;
}

.review-stars-display .star {
  color: #6b7280; /* gray-500 - empty/unselected */
  display: inline-block;
  position: relative;
}

.review-stars-display .star.full {
  color: #f5b301; /* your selected yellow */
}

.review-stars-display .star.half {
  color: #6b7280; /* base gray */
}

.review-stars-display .star.half::after {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: #f5b301;
  width: 50%;
  overflow: hidden;
  direction: ltr; /* force left-to-right for the half fill */
}
</style>
@section('script')
<script>    
    $(document).ready(function() {
        // Profile Picture Update - Firebase only version
        const profilePicUploadHandler = function() {
            const $avatarEdit = $('.avatar-edit');
            const $avatarImg = $('.avatar-img');
            const storageRef = firebase.storage().ref();
            const usersCollection = firebase.firestore().collection('users');
            
            // Create hidden file input
            const $fileInput = $('<input type="file" id="profile-pic-upload" accept="image/*" style="display: none;">');
            $('body').append($fileInput);
            
            // Store original src
            $avatarImg.data('original-src', $avatarImg.attr('src'));
            
            // Trigger file input when edit button is clicked
            $avatarEdit.on('click', function(e) {
                e.preventDefault();
                $fileInput.trigger('click');
            });
            
            // Handle file selection
            $fileInput.on('change', function(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                // Validate file type
                const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
                if (!validTypes.includes(file.type)) {
                    showAlert('danger', '{{trans("lang.invalid_file_type_please_upload_valid_image")}}');
                    return;
                }
                
                // Validate file size (2MB max)
                if (file.size > 2 * 1024 * 1024) {
                    showAlert('danger', '{{trans("lang.file_size_too_large_please_upload_an_image_smaller_than_2MB")}}');
                    return;
                }
                
                // Show loading state
                $avatarEdit.addClass('uploading');
                $avatarEdit.html('<div class="spinner-border spinner-border-sm" role="status"></div>');
                
                // Create preview
                const reader = new FileReader();
                reader.onload = function(e) {
                    $avatarImg.attr('src', e.target.result);
                };
                reader.readAsDataURL(file);
                
                // Upload to Firebase Storage
                uploadProfilePicture(file);
            });
            
            // Upload profile picture to Firebase Storage
            function uploadProfilePicture(file) {
                const filePath = `profile_pictures/${firebaseUid}/${Date.now()}_${file.name}`;
                const uploadTask = storageRef.child(filePath).put(file);
                
                uploadTask.on('state_changed',
                    (snapshot) => {
                        // Progress monitoring can be added here if needed
                        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                       
                    },
                    (error) => {
                        // Handle unsuccessful uploads
                        console.error('Upload failed:', error);
                        showAlert('danger', '{{trans("lang.failed_to_upload_profile_picture")}}');
                        revertProfilePicture();
                    },
                    () => {
                        // Handle successful uploads
                        uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                            // Update Firestore with new profile picture URL
                            updateUserProfile(downloadURL);
                        });
                    }
                );
            }
            
            // Update user document in Firestore
            function updateUserProfile(imageUrl) {
                usersCollection.doc(firebaseUid).update({
                    'profilePic': imageUrl,
                    'updatedAt': firebase.firestore.FieldValue.serverTimestamp()
                })
                .then(() => {
                    showAlert('success', '{{trans("lang.profile_picture_updated_successfully")}}');
                    // Update image src with new timestamp to prevent caching
                    $avatarImg.attr('src', imageUrl + '?' + new Date().getTime());
                })              
                .catch((error) => {
                    console.error('Error updating profile:', error);
                    showAlert('danger', '{{trans("lang.failed_to_update_profile_please_try_again")}}');
                    revertProfilePicture();
                })
                .finally(() => {
                    resetUploadButton();
                });
            }
            
            // Revert to original profile picture
            function revertProfilePicture() {
                const originalSrc = $avatarImg.data('original-src');
                if (originalSrc) {
                    $avatarImg.attr('src', originalSrc);
                }
            }
            
            // Reset upload button state
            function resetUploadButton() {
                $avatarEdit.removeClass('uploading');
                $avatarEdit.html('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>');
                $fileInput.val(''); // Reset file input
            }
            
            // Show alert message
            function showAlert(type, message) {
                // Remove any existing alerts first
                $('.profile-pic-alert').remove();
                
                const alert = `
                    <div class="alert alert-${type} alert-dismissible fade show profile-pic-alert" role="alert">
                        <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
                        ${message}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                `;
                
                // Prepend to profile header
                $('.profile-header .container').prepend(alert);
                
                // Auto-dismiss after 5 seconds
                setTimeout(() => {
                    $('.profile-pic-alert').alert('close');
                }, 5000);
            }
        };

        const shouldOpenVehicles = localStorage.getItem('navigateToVehicles') === 'true';

        if (shouldOpenVehicles) {
            // Clean up so it doesn't happen again on refresh
            localStorage.removeItem('navigateToVehicles');

            // Remove active from all tabs
            $('.profile-tab.for-ride-tab-type').removeClass('active');
            
            // Activate Vehicles tab button
            const $vehiclesTab = $('.profile-tab[data-tab="vehicles"]');
            $vehiclesTab.addClass('active');

            // Hide all tab contents / panes
            $('.tab-content .tab-pane, .profile-tab-content').removeClass('active show');

            // Show the vehicles content
            $('#vehicles').addClass('active show');
            $('#vehiclesContent').addClass('active');
        }

        const shouldOpenVerification = localStorage.getItem('navigateToVerification') === 'true';

        if (shouldOpenVerification) {
            localStorage.removeItem('navigateToVerification');

            // Reset all tabs
            $('.profile-tab.for-ride-tab-type').removeClass('active');
            $('.tab-content .tab-pane, .profile-tab-content').removeClass('active show');

            // Activate button
            $('.profile-tab[data-tab="verification"]').addClass('active');

            // Try multiple possible content IDs
            const possibleIds = ['verification', 'verify', 'verificationContent', 'account-verification'];
            let activated = false;

            for (const id of possibleIds) {
                const $content = $(`#${id}`);
                if ($content.length) {
                    $content.addClass('active show');
                   
                    activated = true;
                    break;
                }
            }

            // Fallback: data-tab based
            if (!activated) {
                $('.profile-tab-content[data-tab="verification"]').addClass('active');
              
            }
        }
        
        // Initialize the profile picture upload handler
        profilePicUploadHandler();
        rideDetails();
        
        // Initialize reviews modal
        initializeReviewsModal();
    });

    function rideDetails() {
        // Count rides published by the user
        db.collection('booking')
            .where("createdBy", "==", firebaseUid)
            .get()
            .then(snapshot => {
                $("#publishedRides").html(snapshot.size);
            });

        // Count rides where the user is in bookedUserId array
        db.collection('booking')
            .where("bookedUserId", "array-contains", firebaseUid)
            .get()
            .then(snapshot => {
                $("#takenRides").html(snapshot.size);
            });
    }

    function initializeReviewsModal() {
        const reviewsModal = document.getElementById('reviewsModal');
        const reviewsList = document.getElementById('reviewsList');
        const reviewsLoading = document.getElementById('reviewsLoading');

        $('#viewAllProfileReviews').on('click', async function () {
            $('#reviewsModal').addClass('show').css('display', 'flex');
            $('body').addClass('modal-open').css('overflow', 'hidden');
            
            $('#reviewsList').html('');
            $('#reviewsLoading').show();

            try {
                const userId = "{{ $userData['id'] ?? '' }}";
                
                if (!userId) {
                    console.error('User ID not found');
                    $('#reviewsLoading').hide();
                    $('#reviewsList').html(`
                        <div class="text-center py-10 text-red-400">
                            <p>{{ __('lang.user_not_found') }}</p>
                        </div>
                    `);
                    return;
                }

                const querySnapshot = await db.collection('review')
                    .where('receiver_id', '==', userId)
                    .orderBy('date', 'desc')
                    .get();

                $('#reviewsLoading').hide();

                if (querySnapshot.empty) {
                    $('#reviewsList').html(`
                        <div class="text-center py-10 text-gray-400">
                            <p class="text-lg">{{ __('lang.no_reviews_yet') }}</p>
                        </div>
                    `);
                    return;
                }

                let reviewsHtml = '';

                // Process each review and collect HTML
                const reviewPromises = querySnapshot.docs.map(async (doc) => {
                    const review = doc.data();
                    const rating = parseFloat(review.rating || 0);

                    const full = Math.floor(rating);
                    const hasHalf = (rating % 1) >= 0.5;

                    // Build stars display
                    let starsHtml = '<div class="review-stars-display inline-flex">';
                    for (let i = 5; i >= 1; i--) {
                        let className = 'star text-2xl leading-none';
                        
                        if (i <= full) {
                            className += ' full';
                        } else if (i === full + 1 && hasHalf) {
                            className += ' half';
                        }
                        
                        starsHtml += `<span class="${className}">★</span>`;
                    }
                    starsHtml += '</div>';

                    const dateStr = review.date && review.date.seconds
                        ? new Date(review.date.seconds * 1000).toLocaleDateString('en-US', {
                            month: 'short',
                            day: 'numeric',
                            year: 'numeric'
                        })
                        : '—';

                    const comment = (review.comment || '').trim() || '{{ __('lang.no_comment') }}';
                    const rideId = review.booking_id || '—';
                    const rideIdDisplay = rideId.length > 30 ? rideId.substring(0, 27) + '...' : rideId;

                    // Get reviewer name (sender)
                    let reviewerName = 'Anonymous';
                    if (review.sender_id) {
                        try {
                            const senderSnap = await db.collection('users').doc(review.sender_id).get();
                            if (senderSnap.exists) {
                                const senderData = senderSnap.data();
                                reviewerName = `${senderData.firstName || ''} ${senderData.lastName || ''}`.trim() || 'Anonymous';
                            }
                        } catch (error) {
                            console.error('Error fetching reviewer name:', error);
                        }
                    }

                    return `
                        <div class="border-b border-gray-700 pb-6 mb-6 last:border-b-0 last:pb-0 last:mb-0">
                            <!-- Top row: Ride ID – Stars & Rating – Date -->
                            <div class="flex flex-wrap items-center justify-between m1-3">
                            <!-- Ride ID (left) -->
                            <div class="text-sm text-gray-400 mt-2">
                                {{trans('lang.ride_id')}}: 
                                <span class="text-gray-200">${rideIdDisplay}</span>
                            </div>

                            <!-- Stars + numeric rating (center/right on larger screens) -->
                            <div class="flex items-center gap-2.5 order-3 sm:order-none">
                                ${starsHtml}
                                
                            </div>

                            <!-- Date (right) -->
                            <div class="text-sm text-gray-500 order-2 sm:order-none">
                                ${dateStr}
                            </div>
                            </div>

                            <!-- Comment -->
                            <p class="text-gray-200">${comment}</p>
                        </div>
                        `;
                });

                // Wait for all promises to resolve
                const reviewsArray = await Promise.all(reviewPromises);
                reviewsHtml = reviewsArray.join('');
                
                // Append all reviews at once (without summary)
                $('#reviewsList').html(reviewsHtml);

            } catch (err) {
                console.error("Error loading reviews:", err);
                $('#reviewsLoading').hide();
                $('#reviewsList').html(`
                    <div class="text-center py-10 text-red-400">
                        <p>{{ __('lang.failed_to_load_reviews') }}</p>
                    </div>
                `);
            }
        });

        // Close modal functions
        function closeReviewsModal() {
            $('#reviewsModal').removeClass('show').css('display', 'none');
            $('body').removeClass('modal-open').css('overflow', '');
        }

        $('#closeReviewsModal, #closeReviewsModalBtn, .modal-close-btn').on('click', closeReviewsModal);

        // Close when clicking outside the modal content
        $(window).on('click', function(e) {
            if ($(e.target).is('#reviewsModal')) {
                closeReviewsModal();
            }
        });
    }

    function rideDetails() {
        // Count rides published by the user
        db.collection('booking')
            .where("createdBy", "==", firebaseUid)
            .get()
            .then(snapshot => {
                $("#publishedRides").html(snapshot.size);
            });

        // Count rides where the user is in bookedUserId array
        db.collection('booking')
            .where("bookedUserId", "array-contains", firebaseUid)
            .get()
            .then(snapshot => {
                $("#takenRides").html(snapshot.size);
            });
    }    

</script>
@endsection
@endsection