@extends('frontend.layout.dashboard-master')
@section('site_title', __('Reply to Review'))

@section('content')

@php
    $clientUser  = \App\Models\User::find($find_login_user_order->user_id);
    $clientName  = $clientUser ? $clientUser->first_name . ' ' . $clientUser->last_name : __('Client');

    if ($clientUser?->image) {
        if (cloudStorageExist() && in_array(\Illuminate\Support\Facades\Storage::getDefaultDriver(), ['s3','cloudFlareR2','wasabi'])) {
            $clientImage = render_frontend_cloud_image_if_module_exists('profile/'.$clientUser->image, load_from: $clientUser->load_from ?? '');
        } else {
            $clientImage = asset('assets/uploads/profile/'.$clientUser->image);
        }
    } else {
        $clientImage = asset('assets/static/img/author/author.jpg');
    }

    if (auth()->user()->image) {
        if (cloudStorageExist() && in_array(\Illuminate\Support\Facades\Storage::getDefaultDriver(), ['s3','cloudFlareR2','wasabi'])) {
            $myImage = render_frontend_cloud_image_if_module_exists('profile/'.auth()->user()->image, load_from: auth()->user()->load_from ?? '');
        } else {
            $myImage = asset('assets/uploads/profile/'.auth()->user()->image);
        }
    } else {
        $myImage = asset('assets/static/img/author/author.jpg');
    }

    $stars = $client_rating ? round($client_rating->rating * 2) / 2 : 0;
@endphp

{{-- Back link --}}
<div class="mb-5">
    <a href="{{ route('freelancer.order.details', $id) }}"
       class="inline-flex items-center gap-2 text-[14px] font-medium text-[#3B4759] hover:text-primary">
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M19 12H5M12 5l-7 7 7 7" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        {{ __('Back to Order') }}
    </a>
</div>

<div class="grid grid-cols-1 gap-6 lg:grid-cols-12">

    {{-- Left column --}}
    <div class="space-y-6 lg:col-span-8">

        {{-- Client Review Card --}}
        <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
            <h2 class="mb-5 text-[18px] font-semibold text-[#242B36]">{{ __('Client Review') }}</h2>

            @if($client_rating)
                {{-- Client info row --}}
                <div class="mb-4 flex items-center gap-3">
                    <img src="{{ $clientImage }}" alt="{{ $clientName }}"
                         class="h-12 w-12 rounded-full object-cover shadow-sm">
                    <div class="flex-1">
                        <p class="text-[15px] font-medium text-[#242B36]">{{ $clientName }}</p>
                        <p class="text-[12px] text-[#637381]">{{ $client_rating->created_at?->toFormattedDateString() }}</p>
                    </div>
                    {{-- Stars --}}
                    <div class="flex items-center gap-1.5">
                        <div class="flex items-center gap-0.5">
                            @for($i = 1; $i <= 5; $i++)
                                @if($stars >= $i)
                                    <svg class="h-5 w-5 text-[#FACC15]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                @elseif($stars >= $i - 0.5)
                                    <svg class="h-5 w-5 text-[#FACC15]" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3.372V15.01l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69L10 3.372z"/></svg>
                                @else
                                    <svg class="h-5 w-5 text-[#E9EBF0]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                @endif
                            @endfor
                        </div>
                        <span class="text-[15px] font-semibold text-[#242B36]">{{ number_format($client_rating->rating, 1) }}</span>
                    </div>
                </div>

                @if($client_rating->review_feedback)
                    <p class="text-[14px] leading-relaxed text-[#454F5B]">{{ $client_rating->review_feedback }}</p>
                @endif
            @else
                <p class="text-[14px] text-[#637381]">{{ __('Client has not submitted a review yet.') }}</p>
            @endif
        </div>

        {{-- Reply Card --}}
        @if($freelancer_reply)
            <div class="rounded-2xl border border-[#BBF7D0] bg-[#F0F9F4] p-6 shadow-sm">
                <div class="mb-4 flex items-center gap-2">
                    <svg class="h-5 w-5 text-[#15803D]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                    <h2 class="text-[16px] font-semibold text-[#15803D]">{{ __('Your Reply') }}</h2>
                </div>
                <div class="mb-4 flex items-center gap-3">
                    <img src="{{ $myImage }}" alt="{{ auth()->user()->first_name }}"
                         class="h-10 w-10 rounded-full object-cover">
                    <div>
                        <p class="text-[14px] font-medium text-[#242B36]">{{ auth()->user()->first_name }} {{ auth()->user()->last_name }}</p>
                        <p class="text-[12px] text-[#637381]">{{ $freelancer_reply->created_at?->toFormattedDateString() }}</p>
                    </div>
                </div>
                <p class="text-[14px] leading-relaxed text-[#454F5B]">{{ $freelancer_reply->review_feedback }}</p>
            </div>
        @elseif($client_rating)
            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
                <h2 class="mb-5 text-[18px] font-semibold text-[#242B36]">{{ __('Your Reply') }}</h2>
                <form action="{{ route('freelancer.order.rating', $id) }}" method="post" id="reply-form">
                    @csrf
                    <div class="mb-4">
                        <label class="mb-2 block text-[14px] font-medium text-[#242B36]">
                            {{ __('Reply to this review') }}
                        </label>
                        <textarea name="review_feedback" id="review_feedback" rows="5" maxlength="1000"
                                  class="w-full resize-none rounded-xl border border-[#E9EBF0] p-4 text-[14px] text-[#1C252E] placeholder-[#919EAB] outline-none transition focus:border-primary"
                                  placeholder="{{ __('Write your reply here...') }}">{{ old('review_feedback') }}</textarea>
                        @error('review_feedback')
                            <p class="mt-1 text-[13px] text-[#FF4D4D]">{{ $message }}</p>
                        @enderror
                    </div>
                    <button type="submit" id="submit-btn"
                            class="rounded-xl bg-primary px-8 py-2.5 text-[14px] font-medium text-white transition hover:bg-secondary">
                        {{ __('Submit Reply') }}
                    </button>
                </form>
            </div>
        @endif

    </div>

    {{-- Right sidebar --}}
    <div class="lg:col-span-4">
        <div class="sticky top-24 space-y-4">

            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-5 shadow-sm">
                <p class="mb-3 text-[13px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Order') }}</p>
                <p class="text-[13px] font-medium text-[#242B36]">#{{ str_pad($id, 6, '0', STR_PAD_LEFT) }}</p>

                <hr class="my-4 border-[#E9EBF0]">

                @if($client_rating)
                    <p class="mb-2 text-[13px] font-medium uppercase tracking-wide text-[#637381]">{{ __('Rating') }}</p>
                    <div class="flex items-center gap-2">
                        <div class="flex items-center gap-0.5">
                            @for($i = 1; $i <= 5; $i++)
                                @if($stars >= $i)
                                    <svg class="h-4 w-4 text-[#FACC15]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                @elseif($stars >= $i - 0.5)
                                    <svg class="h-4 w-4 text-[#FACC15]" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3.372V15.01l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69L10 3.372z"/></svg>
                                @else
                                    <svg class="h-4 w-4 text-[#E9EBF0]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                @endif
                            @endfor
                        </div>
                        <span class="text-[14px] font-semibold text-[#242B36]">{{ number_format($client_rating->rating, 1) }}</span>
                    </div>

                    <hr class="my-4 border-[#E9EBF0]">
                @endif

                <div class="space-y-2">
                    @if($freelancer_reply)
                        <div class="flex w-full items-center justify-center gap-2 rounded-xl border border-[#BBF7D0] bg-[#F0F9F4] px-4 py-2.5 text-[14px] font-medium text-[#15803D]">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                            </svg>
                            {{ __('Reply Submitted') }}
                        </div>
                    @endif
                    <a href="{{ route('freelancer.order.details', $id) }}"
                       class="block w-full rounded-xl border border-[#C4C8CE] px-4 py-2.5 text-center text-[14px] font-medium text-[#3B4759] transition hover:bg-[#F9FBFC]">
                        {{ __('Back to Order') }}
                    </a>
                    <a href="{{ route('freelancer.order.all') }}"
                       class="block w-full rounded-xl border border-[#C4C8CE] px-4 py-2.5 text-center text-[14px] font-medium text-[#3B4759] transition hover:bg-[#F9FBFC]">
                        {{ __('All Orders') }}
                    </a>
                </div>
            </div>

        </div>
    </div>

</div>

@endsection

@section('script')
<script>
document.getElementById('reply-form')?.addEventListener('submit', function (e) {
    const ta  = document.getElementById('review_feedback');
    const btn = document.getElementById('submit-btn');
    if (!ta || ta.value.trim().length === 0) {
        e.preventDefault();
        ta?.focus();
        return;
    }
    if (btn) { btn.disabled = true; btn.textContent = '{{ __("Submitting...") }}'; }
});
</script>
@endsection