{{--
    Rating share popup — requires:
    - $modalId (string)
    - $projectShareUrl (string)
    - $rating (int|float)
    - $comment (string|null)
    - $freelancerName (string)
    - $projectTitle (string)
--}}
@php
    $ratingShareTitle = 'شارك نجاحك';
    $ratingShareTextParts = ['تقييم: ' . $rating . '/5'];
    if (!empty($projectTitle)) {
        $ratingShareTextParts[] = $projectTitle;
    }
    $ratingShareText = implode(' — ', $ratingShareTextParts);

    /** SVG مضمّن لأن html2canvas لا يُظهر غالباً <img src="*.svg"> في اللقطة */
    $ratingShareLogoSvg = '';
    $ratingShareLogoPath = public_path('front/images/logo.svg');
    if (is_readable($ratingShareLogoPath)) {
        $ratingShareLogoSvg = file_get_contents($ratingShareLogoPath);
        $ratingShareLogoSvg = preg_replace('/<\?xml[^>]*\?>\s*/u', '', $ratingShareLogoSvg);
        $logoIdSuffix = preg_replace('/[^a-zA-Z0-9_-]/', '_', $modalId);
        $ratingShareLogoSvg = str_replace('id="Layer_2"', 'id="rating_share_logo_' . $logoIdSuffix . '_root"', $ratingShareLogoSvg);
        $ratingShareLogoSvg = str_replace('id="Layer_1-2"', 'id="rating_share_logo_' . $logoIdSuffix . '_g"', $ratingShareLogoSvg);
        $ratingShareLogoSvg = preg_replace(
            '/<svg\s/',
            '<svg class="rating-share-card__logo" role="img" aria-label="' . e(config('app.name')) . '" ',
            $ratingShareLogoSvg,
            1
        );
    }
@endphp
<div class="modal fade rating-share-modal" id="{{ $modalId }}" tabindex="-1" role="dialog" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content rating-share-card">
            <div class="modal-header rating-share-card__header">
                <button type="button" class="close" data-dismiss="modal" aria-label="إغلاق">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body rating-share-card__body">
                {{-- معاينة البطاقة (بدون رأس المودال وأزرار التذييل) --}}
                <div class="rating-share-card__capture">
                    <div class="rating-share-card__brand">
                        @if($ratingShareLogoSvg !== '')
                            {!! $ratingShareLogoSvg !!}
                        @else
                            <img src="{{ asset('front/images/logo.svg') }}" alt="{{ config('app.name') }}" class="rating-share-card__logo" width="140" height="auto" loading="eager" decoding="async">
                        @endif
                    </div>
                    <h2 class="rating-share-card__title" id="{{ $modalId }}Label">شارك نجاحك</h2>
                    @if(!empty($projectTitle))
                        <p class="rating-share-card__project">{{ e($projectTitle) }}</p>
                    @endif
                    <div class="rating-share-card__stars" aria-hidden="true">
                        @for($i = 1; $i <= 5; $i++)
                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="@if($i <= $rating) #ffc107 @else #e0e0e0 @endif" stroke="@if($i <= $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-share-card__score">({{ $rating }}/5)</span>
                    </div>
                    @if(!empty($comment))
                        <div class="rating-share-card__comment">
                            <p>{{ e($comment) }}</p>
                        </div>
                    @endif
                    <p class="rating-share-card__freelancer">
                        <span class="rating-share-card__freelancer-label">المستقل</span>
                        <span class="rating-share-card__freelancer-name">{{ e($freelancerName) }}</span>
                    </p>
                </div>
            </div>
            <div class="modal-footer rating-share-card__footer">
                <div class="rating-share-card__footer-inner">
                    {{-- ترتيب DOM: الإجراء الأساسي أولاً ليظهر بجانب بداية السطر في RTL --}}
                    <button type="button"
                            class="btn rating-share-card__btn rating-share-card__btn--primary"
                            data-project-url="{{ e($projectShareUrl) }}"
                            data-share-title="{{ e($ratingShareTitle) }}"
                            data-share-text="{{ e($ratingShareText) }}"
                            onclick="shareRatingCardAsImage(this)">مشاركة</button>
                    {{-- Single-quoted onclick so @json() double quotes do not break the HTML attribute --}}
                    <button type="button" class="btn rating-share-card__btn rating-share-card__btn--outline" onclick='copyUrlToClipboard(@json($projectShareUrl))'>نسخ الرابط</button>
                    <button type="button" class="btn rating-share-card__btn rating-share-card__btn--secondary" data-dismiss="modal">إغلاق</button>
                </div>
            </div>
        </div>
    </div>
</div>