{{-- Ratings Box Component --}}
{{-- 
    Required variables:
    - $offer: The offer object to get ratings for
--}}

@php
    // جلب تقييم صاحب المشروع للمستقل
    $ownerToFreelancerRating = \App\Models\Rating::where('offer_id', $offer->id)
        ->where('rating_type', \App\Models\Rating::TYPE_OWNER_TO_FREELANCER)
        ->first();
    
    // جلب تقييم المستقل لصاحب المشروع
    $freelancerToOwnerRating = \App\Models\Rating::where('offer_id', $offer->id)
        ->where('rating_type', \App\Models\Rating::TYPE_FREELANCER_TO_OWNER)
        ->first();

    $projectShareUrl = route('project.details', [$offer->project->id, createProjectSlug($offer->project->title)]);
@endphp

@if($ownerToFreelancerRating || $freelancerToOwnerRating)
    <div class="addOffer-block offerDetails-block ratings-block">
        <div class="block-head">
            <h3 class="block-title"> تقيمات المشروع </h3>
        </div>
        <div class="block-body">
            {{-- تقييم صاحب المشروع للمستقل --}}
            @if($ownerToFreelancerRating)
                <div class="rating-section">
                    {{-- User Info at Top --}}
                    <div class="rating-by">
                        <div class="user-info">
                            <div class="label-with-date">
                                <span class="label">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 3px;">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                    صاحب المشروع
                                </span>
                                <span class="rating-date">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 18.063 18.063">
                                        <g id="Icon_ionic-md-time" data-name="Icon ionic-md-time" transform="translate(0.25 0.25)">
                                            <path id="Path_16731" data-name="Path 16731" d="M12.148,3.375a8.781,8.781,0,1,0,8.79,8.781A8.778,8.778,0,0,0,12.148,3.375Zm.008,15.807a7.025,7.025,0,1,1,7.025-7.025A7.025,7.025,0,0,1,12.156,19.182Z" transform="translate(-3.375 -3.375)" fill="rgba(0,0,0,0.9)" stroke="#fafafa" stroke-width="0.5"></path>
                                            <path id="Path_16732" data-name="Path 16732" d="M17.855,10.688H16.538v5.269l4.61,2.765.659-1.081L17.855,15.3Z" transform="translate(-8.634 -6.297)" fill="rgba(0,0,0,0.9)" stroke="#fafafa" stroke-width="0.5"></path>
                                        </g>
                                    </svg>
                                    {{ $ownerToFreelancerRating->created_at ? $ownerToFreelancerRating->created_at->diffForHumans() : 'غير متوفر' }}
                                </span>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Rating Stars --}}
                    <div class="rating-header">
                        <div class="rating-stars">
                            @for($i = 1; $i <= 5; $i++)
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="@if($i <= $ownerToFreelancerRating->rating) #ffc107 @else #e0e0e0 @endif" stroke="@if($i <= $ownerToFreelancerRating->rating) #ffc107 @else #e0e0e0 @endif" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                </svg>
                            @endfor
                            <span class="rating-value">({{ $ownerToFreelancerRating->rating }}/5)</span>
                        </div>
                    </div>
                    
                    {{-- Comment --}}
                    @if($ownerToFreelancerRating->comment)
                        <div class="rating-comment">
                            <p>{{ $ownerToFreelancerRating->comment }}</p>
                        </div>
                    @endif

                    {{-- Share Rating --}}
                    <div class="head-btns" style="margin-top: 10px;margin-right:60px;">
                        <a href="javascript:void(0);"
                           class="head-btn head-btn-outline"
                           title="مشاركة التقييم"
                           data-toggle="modal"
                           data-target="#shareRatingModalOwnerToFreelancer">
                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 30 33">
                                <g id="Icon_feather-share-2" data-name="Icon feather-share-2" transform="translate(1.5 1.5)">
                                    <path d="M31.5 7.5A4.5 4.5 0 1 1 27 3a4.5 4.5 0 0 1 4.5 4.5z" transform="translate(-4.5 -3)" />
                                    <path d="M13.5 18A4.5 4.5 0 1 1 9 13.5a4.5 4.5 0 0 1 4.5 4.5z" transform="translate(-4.5 -3)" />
                                    <path d="M31.5 28.5A4.5 4.5 0 1 1 27 24a4.5 4.5 0 0 1 4.5 4.5z" transform="translate(-4.5 -3)" />
                                    <path d="m12.885 20.265 10.245 5.97" transform="translate(-4.5 -3)" />
                                    <path d="m23.115 9.765-10.23 5.97" transform="translate(-4.5 -3)" />
                                </g>
                            </svg>
                            مشاركة التقييم
                        </a>
                    </div>
                    @include('front.project._rating_share_modal', [
                        'modalId' => 'shareRatingModalOwnerToFreelancer',
                        'projectShareUrl' => $projectShareUrl,
                        'rating' => $ownerToFreelancerRating->rating,
                        'comment' => $ownerToFreelancerRating->comment,
                        'freelancerName' => $ownerToFreelancerRating->ratedUser->name ?? 'المستقل',
                        'projectTitle' => $offer->project->title ?? '',
                    ])
                </div>
            @endif

            {{-- تقييم المستقل لصاحب المشروع --}}
            @if($freelancerToOwnerRating)
                <div class="rating-section">
                    {{-- User Info at Top --}}
                    <div class="rating-by">
                        <a href="{{ route('freelancers.details', $freelancerToOwnerRating->ratedBy->username) }}" class="user-img">
                            <img src="{{ $freelancerToOwnerRating->ratedBy->image ?? asset('default-avatar.png') }}" alt="{{ $freelancerToOwnerRating->ratedBy->name ?? 'المستقل' }}" class="img-fluid" loading="lazy" decoding="async" width="50" height="50">
                        </a>
                        <div class="user-info">
                            <a href="{{ route('freelancers.details', $freelancerToOwnerRating->ratedBy->username) }}" class="user-name">{{ $freelancerToOwnerRating->ratedBy->name ?? 'المستقل' }}</a>
                            <div class="label-with-date">
                                <span class="label">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 3px;">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                    المستقل
                                </span>
                                <span class="rating-date">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 18.063 18.063">
                                        <g id="Icon_ionic-md-time" data-name="Icon ionic-md-time" transform="translate(0.25 0.25)">
                                            <path id="Path_16731" data-name="Path 16731" d="M12.148,3.375a8.781,8.781,0,1,0,8.79,8.781A8.778,8.778,0,0,0,12.148,3.375Zm.008,15.807a7.025,7.025,0,1,1,7.025-7.025A7.025,7.025,0,0,1,12.156,19.182Z" transform="translate(-3.375 -3.375)" fill="rgba(0,0,0,0.9)" stroke="#fafafa" stroke-width="0.5"></path>
                                            <path id="Path_16732" data-name="Path 16732" d="M17.855,10.688H16.538v5.269l4.61,2.765.659-1.081L17.855,15.3Z" transform="translate(-8.634 -6.297)" fill="rgba(0,0,0,0.9)" stroke="#fafafa" stroke-width="0.5"></path>
                                        </g>
                                    </svg>
                                    {{ $freelancerToOwnerRating->created_at->diffForHumans() }}
                                </span>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Rating Stars --}}
                    <div class="rating-header">
                        <div class="rating-stars">
                            @for($i = 1; $i <= 5; $i++)
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="@if($i <= $freelancerToOwnerRating->rating) #ffc107 @else #e0e0e0 @endif" stroke="@if($i <= $freelancerToOwnerRating->rating) #ffc107 @else #e0e0e0 @endif" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                </svg>
                            @endfor
                            <span class="rating-value">({{ $freelancerToOwnerRating->rating }}/5)</span>
                        </div>
                    </div>
                    
                    {{-- Comment --}}
                    @if($freelancerToOwnerRating->comment)
                        <div class="rating-comment">
                            <p>{{ $freelancerToOwnerRating->comment }}</p>
                        </div>
                    @endif

                    {{-- Share Rating --}}
                    <div class="head-btns" style="margin-top: 10px;margin-right:60px;">
                        <a href="javascript:void(0);"
                           class="head-btn head-btn-outline"
                           title="مشاركة التقييم"
                           data-toggle="modal"
                           data-target="#shareRatingModalFreelancerToOwner">
                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 30 33">
                                <g id="Icon_feather-share-2" data-name="Icon feather-share-2" transform="translate(1.5 1.5)">
                                    <path d="M31.5 7.5A4.5 4.5 0 1 1 27 3a4.5 4.5 0 0 1 4.5 4.5z" transform="translate(-4.5 -3)" />
                                    <path d="M13.5 18A4.5 4.5 0 1 1 9 13.5a4.5 4.5 0 0 1 4.5 4.5z" transform="translate(-4.5 -3)" />
                                    <path d="M31.5 28.5A4.5 4.5 0 1 1 27 24a4.5 4.5 0 0 1 4.5 4.5z" transform="translate(-4.5 -3)" />
                                    <path d="m12.885 20.265 10.245 5.97" transform="translate(-4.5 -3)" />
                                    <path d="m23.115 9.765-10.23 5.97" transform="translate(-4.5 -3)" />
                                </g>
                            </svg>
                            مشاركة التقييم
                        </a>
                    </div>
                    @include('front.project._rating_share_modal', [
                        'modalId' => 'shareRatingModalFreelancerToOwner',
                        'projectShareUrl' => $projectShareUrl,
                        'rating' => $freelancerToOwnerRating->rating,
                        'comment' => $freelancerToOwnerRating->comment,
                        'freelancerName' => $freelancerToOwnerRating->ratedBy->name ?? 'المستقل',
                        'projectTitle' => $offer->project->title ?? '',
                    ])
                </div>
            @endif
        </div>
    </div>
@endif