<?php $__env->startSection('content'); ?>
    <div class="w-full min-h-screen bg-[#f4f4f4]" x-data="{ 
                                avgRating: <?php echo e($post->average_rating ?? 0); ?>, 
                                ratingsCount: <?php echo e($post->ratings_count ?? 0); ?>,
                                commentsCount: <?php echo e($post->comments_count ?? 0); ?>,
                                selectedRating: 0,
                                commentText: '',
                                isSubmitting: false,
                                userHasRated: <?php echo e($userRating ? 'true' : 'false'); ?>,
                                localComments: [],

                            async submitEngagement() {
                                if (this.selectedRating === 0) return;
                                this.isSubmitting = true;

                                try {
                                    const response = await fetch('<?php echo e(route('rate-my-pay.rate', $post->id)); ?>', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>',
                                            'Accept': 'application/json'
                                        },
                                        body: JSON.stringify({
                                            rating: this.selectedRating,
                                            content: this.commentText
                                        })
                                    });

                                    const data = await response.json();
                                    if (data.status) {
                                        this.avgRating = data.average_rating;
                                        this.ratingsCount = data.ratings_count;
                                        this.commentsCount = data.comments_count;
                                        this.userHasRated = true;

                                        if (data.new_comment) {
                                            this.localComments.unshift(data.new_comment);
                                        }

                                        // Reset form
                                        this.commentText = '';

                                        // Move user to Community Rating section
                                        document.getElementById('community-rating-header').scrollIntoView({ behavior: 'smooth' });
                                    }
                                } catch (e) {
                                    console.error('Submission failed', e);
                                } finally {
                                    this.isSubmitting = false;
                                }
                            }
                        }">
        <div class="mx-auto p-6">

            
            <div class="mb-6">
                <?php if($post->communities->first()): ?>
                    <a href="<?php echo e(route('communities.show', $post->communities->first()->id)); ?>"
                        class="flex items-center gap-2 text-[#2F3D7E] hover:text-[#1A234A] font-semibold transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                        Back to <?php echo e($post->communities->first()->name); ?>

                    </a>
                <?php else: ?>
                    <a href="<?php echo e(route('communities.index')); ?>"
                        class="flex items-center gap-2 text-[#2F3D7E] hover:text-[#1A234A] font-semibold transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                        Back to Communities
                    </a>
                <?php endif; ?>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-3 space-y-6">
                    
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-8">
                        
                        <div class="flex justify-between items-start mb-6 pb-6 border-b border-gray-200">
                            <div class="flex gap-4 flex-1">
                                <div
                                    class="w-14 h-14 rounded-full bg-gradient-to-br from-blue-100 to-blue-50 border border-blue-100 flex items-center justify-center shrink-0">
                                    <div class="bg-[#2F3D7E] rounded-full p-2">
                                        <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="w-full md:flex-row flex-col justify-between min-w-0">
                                    <div>
                                        <h1 class="text-2xl font-bold text-gray-900">
                                            <?php echo e($post->is_anonymous ? 'Anonymous' : ($post->user->name ?? 'Unknown User')); ?>

                                        </h1>
                                        <p class="text-lg text-gray-600 mb-1">
                                            <?php echo e($post->jobExperience->job_title); ?> .
                                            <?php echo e($post->jobExperience->level ?? ''); ?> .
                                            <?php echo e($post->jobExperience->location ?? 'Location Unknown'); ?>

                                        </p>
                                    </div>
                                    <div class="flex flex-wrap gap-4 text-sm text-gray-500">
                                        <span><?php echo e($post->created_at->diffForHumans()); ?></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        
                        <?php if($post->payslip_url): ?>
                            <div class="mb-8 pb-8 border-b border-gray-200">
                                <div
                                    class="bg-slate-100 rounded-lg overflow-hidden border border-slate-200 relative group cursor-pointer max-w-2xl">
                                    <div class="aspect-[4/3] bg-white relative">
                                        <img src="<?php echo e($post->payslip_url); ?>" alt="Verified Payslip"
                                            class="w-full h-full object-cover opacity-95 group-hover:opacity-100 transition-opacity">
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-60">
                                        </div>
                                        <div class="absolute top-3 right-3">
                                            <div
                                                class="inline-flex items-center rounded-full border border-transparent bg-green-500/90 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm gap-1.5">
                                                <svg class="w-3 h-3 fill-current" xmlns="http://www.w3.org/2000/svg"
                                                    viewBox="0 0 24 24" fill="currentColor">
                                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                                                </svg> Verified Pay
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>

                        
                        <div class="mb-8 pb-8 border-b border-gray-200">
                            <h2 class="text-lg font-semibold text-[#2D3E6E] mb-4">Full Story & Details</h2>
                            <p class="text-gray-700 leading-relaxed"><?php echo e($post->content); ?></p>
                        </div>

                        
                        <div class="mb-8 pb-8 border-b border-gray-200">
                            <div class="flex items-center gap-2 mb-4">
                                <svg width="20" height="20" viewBox="0 0 18 18" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9 1.5V16.5" stroke="#2D3E6E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M12.75 3.75H7.125C6.42881 3.75 5.76113 4.02656 5.26884 4.51884C4.77656 5.01113 4.5 5.67881 4.5 6.375C4.5 7.07119 4.77656 7.73887 5.26884 8.23116C5.76113 8.72344 6.42881 9 7.125 9H10.875C11.5712 9 12.2389 9.27656 12.7312 9.76884C13.2234 10.2611 13.5 10.9288 13.5 11.625C13.5 12.3212 13.2234 12.9889 12.7312 13.4812C12.2389 13.9734 11.5712 14.25 10.875 14.25H4.5"
                                        stroke="#2D3E6E" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                                <h2 class="text-lg font-semibold text-[#2D3E6E]">Compensation Details</h2>
                            </div>
                            <div class="flex md:flex-row flex-col flex-wrap gap-6">
                                <div class="flex-1 min-w-[120px]">
                                    <div class="text-sm text-gray-500">Base Salary</div>
                                    <div class="font-semibold text-lg text-gray-900"><?php echo e($post->formatted_salary); ?></div>
                                </div>
                                <div class="flex-1 min-w-[120px]">
                                    <div class="text-sm text-gray-500">Bonus</div>
                                    <div class="font-semibold text-lg text-gray-900"><?php echo e($post->jobExperience->currency); ?>

                                        <?php echo e(number_format($post->bonus ?? 0)); ?>

                                    </div>
                                </div>
                                <div class="flex-1 min-w-[120px]">
                                    <div class="text-sm text-gray-500">Experience</div>
                                    <div class="font-semibold text-lg text-gray-900">
                                        <?php echo e($post->jobExperience->years_of_experience ?? '0'); ?> yrs
                                    </div>
                                </div>
                                <div class="flex-1 min-w-[120px] bg-red-50 p-4 rounded-lg border border-red-100">
                                    <div class="text-sm text-gray-500">Total Comp</div>
                                    <div class="font-semibold text-lg text-[#E85D4D]">
                                        <?php echo e($post->formatted_total_compensation); ?>

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

                        
                        <div id="community-rating-header" class="mb-8 pb-8 border-b border-gray-200">
                            <h2 class="text-lg font-semibold text-[#2D3E6E] mb-4">Community Ratings</h2>
                            <div class="flex items-end justify-center gap-6">
                                <div class="flex md:flex-row flex-col items-center gap-3">
                                    <div class="flex gap-1">
                                        <template x-for="i in 5">
                                            <span class="text-3xl transition-colors"
                                                :class="i <= Math.round(avgRating) ? 'text-yellow-400' : 'text-gray-300'">★</span>
                                        </template>
                                    </div>
                                    <div class="text-center">
                                        <p class="text-3xl font-bold text-gray-900"
                                            x-text="parseFloat(avgRating).toFixed(1)"></p>
                                        <p class="text-xs text-gray-500">Based on <span x-text="ratingsCount"></span> <span
                                                x-text="ratingsCount === 1 ? 'rating' : 'ratings'"></span></p>
                                    </div>
                                </div>
                            </div>
                        </div>



                        
                        <?php if($chart): ?>
                            <div class="mb-8 pb-8 border-b border-gray-200">
                                <h2 class="text-lg font-semibold text-gray-900 mb-4">
                                    Market Comparison
                                </h2>

                                <div class="bg-white p-6 rounded-lg border border-gray-200">
                                    <div id="marketComparisonChart" class="w-full"></div>
                                </div>
                            </div>

                            <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
                            <script>
                                document.addEventListener('DOMContentLoaded', function () {
                                    const options = {
                                        chart: { type: 'bar', height: 320, toolbar: { show: false } },
                                        series: [{
                                            name: 'Salary (<?php echo e($chart['currency']); ?>)',
                                            data: <?php echo json_encode(array_values($chart['values'])); ?>

                                        }],
                                        colors: [
                                            '#EF4444', // red – very low / negative
                                            '#F97316', // orange – low
                                            '#EAB308', // yellow – market average
                                            '#22C55E', // green – above market
                                            '#16A34A', // dark green – top market
                                        ],
                                        plotOptions: {
                                            bar: { borderRadius: 6, columnWidth: '45%', distributed: true }
                                        },
                                        dataLabels: {
                                            enabled: true,
                                            formatter: val => new Intl.NumberFormat().format(val),
                                            style: { colors: ['#374151'], fontSize: '12px' }
                                        },
                                        xaxis: {
                                            categories: <?php echo json_encode(array_keys($chart['values'])); ?>,
                                            title: { text: 'Market Percentiles' }
                                        },
                                        yaxis: {
                                            labels: { formatter: val => new Intl.NumberFormat().format(val) },
                                            title: { text: 'Annual Compensation' }
                                        },
                                        tooltip: {
                                            y: { formatter: val => new Intl.NumberFormat().format(val) + ' <?php echo e($chart['currency']); ?>' }
                                        }
                                    };

                                    new ApexCharts(
                                        document.querySelector('#marketComparisonChart'),
                                        options
                                    ).render();
                                });
                            </script>
                        <?php endif; ?>

                        
                        <?php if($marketComparison): ?>
                            <div class="mb-8">
                                <h3 class="text-md font-semibold text-gray-900 mb-3">
                                    How this pay compares to the market
                                </h3>

                                <div class="bg-[#F9FAFB] border border-gray-200 rounded-lg p-5 space-y-4">
                                    <p class="text-sm text-gray-700">
                                      This compensation is
                                        <span class="font-semibold">
                                            <?php echo e(number_format($job->total_compensation)); ?> <?php echo e($marketComparison['currency']); ?>

                                        </span>.
                                    </p>

                                    <p class="text-sm text-gray-700">
                                        The market median for this role is
                                        <span class="font-semibold">
                                            <?php echo e(number_format($marketComparison['percentiles']['p50'])); ?>

                                            <?php echo e($marketComparison['currency']); ?>

                                        </span>.
                                    </p>

                                    <?php
                                        $positioning = $marketComparison['positioning'];
                                        $badgeMap = [
                                            'below_market' => ['bg-red-100', 'text-red-700', 'Below Market'],
                                            'at_market' => ['bg-green-100', 'text-green-700', 'At Market'],
                                            'above_market' => ['bg-blue-100', 'text-blue-700', 'Above Market'],
                                        ];
                                    ?>

                                    <div class="flex items-center gap-3">
                                        <span class="px-3 py-1 rounded-full text-xs font-semibold
                                                        <?php echo e($badgeMap[$positioning][0] ?? 'bg-gray-100'); ?>

                                                        <?php echo e($badgeMap[$positioning][1] ?? 'text-gray-700'); ?>">
                                            <?php echo e($badgeMap[$positioning][2] ?? 'Unknown'); ?>

                                        </span>

                                        <span class="text-xs text-gray-500">
                                            Confidence score:
                                            <?php echo e((int) ($marketComparison['confidence_score'] * 100)); ?>%
                                        </span>
                                    </div>

                                    <p class="text-xs text-gray-500">
                                        This estimate is based on role, experience, location, industry, and
                                        company size using current market data.
                                    </p>
                                </div>
                            </div>
                        <?php endif; ?>

                    </div>

                    
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-8 mb-8">
                        <div class="flex items-center gap-2 mb-6">
                            <h2 class="text-lg font-semibold text-[#2D3E6E]">Community Ratings & Comments (<span
                                    x-text="commentsCount"></span>)
                            </h2>
                        </div>

                        <div class="space-y-6 mb-6">
                            
                            <template x-for="comment in localComments" :key="comment.created_at">
                                <div class="pb-6 border-b border-gray-100">
                                    <div class="flex gap-3">
                                        <img :src="'https://ui-avatars.com/api/?name=' + encodeURIComponent(comment.author_name) + '&background=2F3D7E&color=fff'"
                                            class="w-10 h-10 rounded-full shrink-0">
                                        <div class="flex-1">
                                            <div class="flex items-start justify-between gap-3">
                                                <p class="font-semibold text-gray-900" x-text="comment.author_name"></p>
                                                <div class="flex gap-1">
                                                    <template x-for="i in 5">
                                                        <span class="text-sm"
                                                            :class="i <= comment.rating ? 'text-yellow-400' : 'text-gray-300'">★</span>
                                                    </template>
                                                </div>
                                            </div>
                                            <p class="text-gray-700 text-sm mt-2" x-text="comment.content"></p>
                                            <p class="text-xs text-gray-500 mt-3" x-text="comment.created_at"></p>
                                        </div>
                                    </div>
                                </div>
                            </template>

                            
                            <?php $__empty_1 = true; $__currentLoopData = $post->comments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $comment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <div class="pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                                    <div class="flex gap-3">
                                        <img src="https://ui-avatars.com/api/?name=<?php echo e(urlencode($comment->user->name)); ?>&background=2F3D7E&color=fff"
                                            class="w-10 h-10 rounded-full shrink-0">
                                        <div class="flex-1 min-w-0">
                                            <div class="flex items-start justify-between gap-3">
                                                <div>
                                                    <p class="font-semibold text-gray-900"><?php echo e($comment->user->name); ?></p>
                                                </div>
                                                <div class="flex gap-1">
                                                    <?php $rating = $post->getUserRating($comment->user)?->rating ?? 0; ?>
                                                    <?php for($i = 1; $i <= 5; $i++): ?>
                                                        <span
                                                            class="text-sm <?php echo e($i <= $rating ? 'text-yellow-400' : 'text-gray-300'); ?>">★</span>
                                                    <?php endfor; ?>
                                                </div>
                                            </div>
                                            <p class="text-gray-700 text-sm mt-2"><?php echo e($comment->content); ?></p>
                                            <div class="flex items-center gap-3 mt-3">
                                                <span
                                                    class="text-xs text-gray-500"><?php echo e($comment->created_at->diffForHumans()); ?></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <template x-if="localComments.length === 0">
                                    <p class="text-center text-gray-500 py-8">No comments yet. Be the first to share your
                                        thoughts!</p>
                                </template>
                            <?php endif; ?>
                        </div>
                    </div>

                    
                    <div id="rate-section" class="bg-white rounded-xl border border-gray-200 shadow-sm p-8"
                        x-show="<?php echo e(auth()->check() ? 'true' : 'false'); ?>">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6"
                            x-text="userHasRated ? 'Your Rating' : 'Rate This Salary'"></h2>

                        <div class="mb-8 p-6 bg-[#F9FAFB] rounded-lg border border-gray-200">
                            <p class="text-center text-gray-900 font-semibold mb-6"
                                x-text="userHasRated ? 'You have submitted your rating' : 'How would you rate this compensation?'">
                            </p>
                            <div class="flex justify-center gap-4 mb-6">
                                <?php for($i = 1; $i <= 5; $i++): ?>
                                    <button type="button" @click="if(!userHasRated) selectedRating = <?php echo e($i); ?>"
                                        class="md:text-5xl text-2xl transition-all focus:outline-none"
                                        :class="[
                                                                                                                                                                                                                                                                                            selectedRating >= <?php echo e($i); ?> ? 'text-yellow-400' : 'text-gray-300',
                                                                                                                                                                                                                                                                                            !userHasRated ? 'hover:scale-110 cursor-pointer' : 'cursor-default'
                                                                                                                                                                                                                                                    ]"
                                        :disabled="userHasRated">★</button>
                                <?php endfor; ?>
                            </div>
                            <div class="text-center h-12">
                                <p class="text-lg font-semibold text-gray-900"
                                    x-text="selectedRating === 1 ? 'Very Underpaid' : selectedRating === 2 ? 'Below Average' : selectedRating === 3 ? 'Fair Market Value' : selectedRating === 4 ? 'Above Market' : selectedRating === 5 ? 'Exceptional' : 'Select a rating'">
                                </p>
                            </div>
                        </div>

                        
                        <div class="mb-8 pt-6 border-t border-gray-200">
                            <p class="text-sm font-semibold text-gray-900 mb-4"
                                x-text="userHasRated ? 'Your Comment' : 'Add a comment (Optional but encouraged!)'"></p>
                            <textarea x-model="commentText" :disabled="userHasRated"
                                placeholder="Share why you rated this way..."
                                class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E] min-h-[120px] disabled:bg-gray-50 disabled:text-gray-500"></textarea>
                        </div>

                        
                        <div class="mb-8 p-6 bg-blue-50 rounded-lg border border-blue-100">
                            <p class="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
                                <span class="text-xl">⭐</span>
                                Star Rating Guide:
                            </p>
                            <div class="space-y-2 text-sm">
                                <p><span class="text-yellow-400">★</span> <span class="font-semibold">1 Star:</span> <span
                                        class="text-gray-600">Significantly underpaid</span></p>
                                <p><span class="text-yellow-400">★★</span> <span class="font-semibold">2 Stars:</span> <span
                                        class="text-gray-600">Below
                                        average</span></p>
                                <p><span class="text-yellow-400">★★★</span> <span class="font-semibold">3 Stars:</span>
                                    <span class="text-gray-600">Fair
                                        market value</span>
                                </p>
                                <p><span class="text-yellow-400">★★★★</span> <span class="font-semibold">4 Stars:</span>
                                    <span class="text-gray-600">Above market</span>
                                </p>
                                <p><span class="text-yellow-400">★★★★★</span> <span class="font-semibold">5 Stars:</span>
                                    <span class="text-gray-600">Exceptional</span>
                                </p>
                            </div>
                        </div>

                        <div class="flex justify-end">
                            
                            <template x-if="!userHasRated">
                                <button @click="submitEngagement()" :disabled="selectedRating === 0 || isSubmitting"
                                    class="md:w-[300px] flex justify-center items-center gap-2 px-6 py-3 bg-[#2F3D7E] text-white rounded-lg hover:bg-[#1A234A] transition-colors font-semibold text-sm disabled:bg-gray-400 disabled:cursor-not-allowed shadow-lg shadow-blue-900/10">
                                    <span x-text="isSubmitting ? 'Submitting...' : 'Submit Rating'"></span>
                                    <svg x-show="!isSubmitting" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 24 24" fill="currentColor">
                                        <path
                                            d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z" />
                                    </svg>
                                </button>
                            </template>

                            
                            <template x-if="userHasRated">
                                <div
                                    class="flex items-center gap-2 text-green-600 font-bold bg-green-50 px-6 py-3 rounded-lg border border-green-100">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                            d="M5 13l4 4L19 7" />
                                    </svg>
                                    Rated
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.dashboard', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/ratemypay_dev/resources/views/rate-my-pay/show.blade.php ENDPATH**/ ?>