@extends('frontend.layout.dashboard-master')
@section('site_title', __('Order Rating'))

@section('style')
<style>
.reaction-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s ease;
    background: #f8fafc;
}
.reaction-item:hover { border-color: color-mix(in srgb, var(--main-color-one) 35%, white); background: color-mix(in srgb, var(--main-color-one) 6%, white); }
.reaction-item.selected { border-color: var(--main-color-one); background: color-mix(in srgb, var(--main-color-one) 10%, white); }
.reaction-item img { width: 40px; height: 40px; }
.reaction-stars { display: flex; gap: 2px; }
.reaction-stars span { color: #F59E0B; font-size: 11px; }
.category-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.category-row:last-child { border-bottom: none; }
.category-dot { width: 8px; height: 8px; border-radius: 50%; background: #C4C8CE; }
.category-dot.rated { background: var(--main-color-one); }

/* Dynamic color helpers */
.text-main { color: var(--main-color-one); }
.bg-main-tint { background-color: color-mix(in srgb, var(--main-color-one) 10%, white); }
.hover-text-main:hover { color: var(--main-color-one); }
.btn-main { background-color: var(--main-color-one); color: #fff; }
.btn-main:hover { background-color: color-mix(in srgb, var(--main-color-one) 82%, black); color: #fff; }
.focus-main:focus { border-color: var(--main-color-one); outline: none; }
</style>
@endsection

@section('content')

<div class="mb-5">
    <a href="{{ route('client.order.all') }}"
       class="inline-flex items-center gap-2 text-[14px] font-medium text-[#3B4759] hover-text-main">
        <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 Orders') }}
    </a>
</div>

<form action="{{ route('client.order.rating', $id) }}" method="post">
    @csrf
    <input type="hidden" name="skill_rating" id="skill_rating" value="0">
    <input type="hidden" name="availability_rating" id="availability_rating" value="0">
    <input type="hidden" name="communication_rating" id="communication_rating" value="0">
    <input type="hidden" name="work_quality_rating" id="work_quality_rating" value="0">
    <input type="hidden" name="deadline_rating" id="deadline_rating" value="0">
    <input type="hidden" name="co_operation_rating" id="co_operation_rating" value="0">

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

        {{-- Left: rating groups + review --}}
        <div class="space-y-5 lg:col-span-8">

            {{-- Review textarea --}}
            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
                <h2 class="mb-5 text-[20px] font-semibold text-[#242B36]">{{ __('Submit Your Review') }}</h2>
                <label class="mb-2 block text-[14px] font-medium text-[#242B36]">{{ __('Leave a Review') }}</label>
                <textarea name="review_feedback" id="review_feedback" rows="4"
                          placeholder="{{ __('Write your experience with this freelancer...') }}"
                          class="w-full resize-none rounded-xl border border-[#E9EBF0] p-4 text-[14px] text-[#242B36] placeholder-[#919EAB] outline-none transition focus-main"></textarea>
            </div>

            {{-- Skills --}}
            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('How would you rate') }} {{ $find_login_user_order?->freelancer->first_name }}{{ __("'s") }} {{ __('skills') }}</h3>
                    <button type="button" class="get_skill_val text-[13px] text-[#637381] hover-text-main" data-skill_val="0">{{ __('Reset') }}</button>
                </div>
                <div class="flex flex-wrap gap-3">
                    @foreach([1 => ['sad_reaction.svg', __('Very Sad'), 1], 2 => ['not_good_reaction.svg', __('Not Good'), 2], 3 => ['its_ok_reaction.svg', __("It's Ok"), 3], 4 => ['happy_reaction.svg', __("I'm Happy"), 4], 5 => ['very_happy_reaction.svg', __('Very Happy'), 5]] as $val => $item)
                    <div class="reaction-item get_skill_val" data-skill_val="{{ $val }}" data-group="skill">
                        <img src="{{ asset('assets/static/icons/'.$item[0]) }}" alt="{{ $item[1] }}">
                        <span class="text-[11px] text-[#637381]">{{ $item[1] }}</span>
                        <div class="reaction-stars">
                            @for($s = 1; $s <= $val; $s++)<span>★</span>@endfor
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Availability --}}
            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Rate') }} {{ $find_login_user_order?->freelancer->first_name }}{{ __("'s") }} {{ __('availability') }}</h3>
                    <button type="button" class="get_availability_val text-[13px] text-[#637381] hover-text-main" data-availability_val="0">{{ __('Reset') }}</button>
                </div>
                <div class="flex flex-wrap gap-3">
                    @foreach([1 => ['sad_reaction.svg', __('Very Sad')], 2 => ['not_good_reaction.svg', __('Not Good')], 3 => ['its_ok_reaction.svg', __("It's Ok")], 4 => ['happy_reaction.svg', __("I'm Happy")], 5 => ['very_happy_reaction.svg', __('Very Happy')]] as $val => $item)
                    <div class="reaction-item get_availability_val" data-availability_val="{{ $val }}" data-group="availability">
                        <img src="{{ asset('assets/static/icons/'.$item[0]) }}" alt="{{ $item[1] }}">
                        <span class="text-[11px] text-[#637381]">{{ $item[1] }}</span>
                        <div class="reaction-stars">
                            @for($s = 1; $s <= $val; $s++)<span>★</span>@endfor
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Communication --}}
            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Rate') }} {{ $find_login_user_order?->freelancer->first_name }}{{ __("'s") }} {{ __('Communications') }}</h3>
                    <button type="button" class="get_communication_val text-[13px] text-[#637381] hover-text-main" data-communication_val="0">{{ __('Reset') }}</button>
                </div>
                <div class="flex flex-wrap gap-3">
                    @foreach([1 => ['sad_reaction.svg', __('Very Sad')], 2 => ['not_good_reaction.svg', __('Not Good')], 3 => ['its_ok_reaction.svg', __("It's Ok")], 4 => ['happy_reaction.svg', __("I'm Happy")], 5 => ['very_happy_reaction.svg', __('Very Happy')]] as $val => $item)
                    <div class="reaction-item get_communication_val" data-communication_val="{{ $val }}" data-group="communication">
                        <img src="{{ asset('assets/static/icons/'.$item[0]) }}" alt="{{ $item[1] }}">
                        <span class="text-[11px] text-[#637381]">{{ $item[1] }}</span>
                        <div class="reaction-stars">
                            @for($s = 1; $s <= $val; $s++)<span>★</span>@endfor
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Work Quality --}}
            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Rate') }} {{ $find_login_user_order?->freelancer->first_name }}{{ __("'s") }} {{ __('Work Quality') }}</h3>
                    <button type="button" class="get_work_quality_val text-[13px] text-[#637381] hover-text-main" data-work_quality_val="0">{{ __('Reset') }}</button>
                </div>
                <div class="flex flex-wrap gap-3">
                    @foreach([1 => ['sad_reaction.svg', __('Very Sad')], 2 => ['not_good_reaction.svg', __('Not Good')], 3 => ['its_ok_reaction.svg', __("It's Ok")], 4 => ['happy_reaction.svg', __("I'm Happy")], 5 => ['very_happy_reaction.svg', __('Very Happy')]] as $val => $item)
                    <div class="reaction-item get_work_quality_val" data-work_quality_val="{{ $val }}" data-group="work_quality">
                        <img src="{{ asset('assets/static/icons/'.$item[0]) }}" alt="{{ $item[1] }}">
                        <span class="text-[11px] text-[#637381]">{{ $item[1] }}</span>
                        <div class="reaction-stars">
                            @for($s = 1; $s <= $val; $s++)<span>★</span>@endfor
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Meeting Deadline --}}
            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Rate') }} {{ $find_login_user_order?->freelancer->first_name }}{{ __("'s") }} {{ __('Meetings') }}</h3>
                    <button type="button" class="get_deadline_val text-[13px] text-[#637381] hover-text-main" data-deadline_val="0">{{ __('Reset') }}</button>
                </div>
                <div class="flex flex-wrap gap-3">
                    @foreach([1 => ['sad_reaction.svg', __('Very Sad')], 2 => ['not_good_reaction.svg', __('Not Good')], 3 => ['its_ok_reaction.svg', __("It's Ok")], 4 => ['happy_reaction.svg', __("I'm Happy")], 5 => ['very_happy_reaction.svg', __('Very Happy')]] as $val => $item)
                    <div class="reaction-item get_deadline_val" data-deadline_val="{{ $val }}" data-group="deadline">
                        <img src="{{ asset('assets/static/icons/'.$item[0]) }}" alt="{{ $item[1] }}">
                        <span class="text-[11px] text-[#637381]">{{ $item[1] }}</span>
                        <div class="reaction-stars">
                            @for($s = 1; $s <= $val; $s++)<span>★</span>@endfor
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Co-operations --}}
            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Rate') }} {{ $find_login_user_order?->freelancer->first_name }}{{ __("'s") }} {{ __('Co-operations') }}</h3>
                    <button type="button" class="get_co_operation_val text-[13px] text-[#637381] hover-text-main" data-co_operation_val="0">{{ __('Reset') }}</button>
                </div>
                <div class="flex flex-wrap gap-3">
                    @foreach([1 => ['sad_reaction.svg', __('Very Sad')], 2 => ['not_good_reaction.svg', __('Not Good')], 3 => ['its_ok_reaction.svg', __("It's Ok")], 4 => ['happy_reaction.svg', __("I'm Happy")], 5 => ['very_happy_reaction.svg', __('Very Happy')]] as $val => $item)
                    <div class="reaction-item get_co_operation_val" data-co_operation_val="{{ $val }}" data-group="co_operation">
                        <img src="{{ asset('assets/static/icons/'.$item[0]) }}" alt="{{ $item[1] }}">
                        <span class="text-[11px] text-[#637381]">{{ $item[1] }}</span>
                        <div class="reaction-stars">
                            @for($s = 1; $s <= $val; $s++)<span>★</span>@endfor
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

        </div>

        {{-- Right: summary + submit --}}
        <div class="lg:col-span-4">
            <div class="sticky top-24 rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
                <h3 class="mb-5 text-[16px] font-semibold text-[#242B36]">{{ __('Rating Summary') }}</h3>

                <div class="mb-6 space-y-0">
                    <div class="category-row" id="row-skill">
                        <span class="text-[14px] text-[#454F5B]">{{ __('Skills') }}</span>
                        <div class="flex items-center gap-2">
                            <div class="category-dot" id="dot-skill"></div>
                            <span class="text-[13px] font-medium text-[#242B36]" id="score-skill">—</span>
                        </div>
                    </div>
                    <div class="category-row" id="row-availability">
                        <span class="text-[14px] text-[#454F5B]">{{ __('Availability') }}</span>
                        <div class="flex items-center gap-2">
                            <div class="category-dot" id="dot-availability"></div>
                            <span class="text-[13px] font-medium text-[#242B36]" id="score-availability">—</span>
                        </div>
                    </div>
                    <div class="category-row" id="row-communication">
                        <span class="text-[14px] text-[#454F5B]">{{ __('Communication') }}</span>
                        <div class="flex items-center gap-2">
                            <div class="category-dot" id="dot-communication"></div>
                            <span class="text-[13px] font-medium text-[#242B36]" id="score-communication">—</span>
                        </div>
                    </div>
                    <div class="category-row" id="row-work_quality">
                        <span class="text-[14px] text-[#454F5B]">{{ __('Work Quality') }}</span>
                        <div class="flex items-center gap-2">
                            <div class="category-dot" id="dot-work_quality"></div>
                            <span class="text-[13px] font-medium text-[#242B36]" id="score-work_quality">—</span>
                        </div>
                    </div>
                    <div class="category-row" id="row-deadline">
                        <span class="text-[14px] text-[#454F5B]">{{ __('Meeting Deadline') }}</span>
                        <div class="flex items-center gap-2">
                            <div class="category-dot" id="dot-deadline"></div>
                            <span class="text-[13px] font-medium text-[#242B36]" id="score-deadline">—</span>
                        </div>
                    </div>
                    <div class="category-row" id="row-co_operation">
                        <span class="text-[14px] text-[#454F5B]">{{ __('Co-operations') }}</span>
                        <div class="flex items-center gap-2">
                            <div class="category-dot" id="dot-co_operation"></div>
                            <span class="text-[13px] font-medium text-[#242B36]" id="score-co_operation">—</span>
                        </div>
                    </div>
                </div>

                <div class="mb-6 flex items-center justify-between rounded-xl bg-main-tint px-4 py-3">
                    <span class="text-[14px] font-medium text-[#242B36]">{{ __('Overall Score') }}</span>
                    <span class="flex items-center gap-1.5 text-[20px] font-semibold text-main">
                        <svg class="h-5 w-5 text-[#F59E0B]" viewBox="0 0 20 20" fill="currentColor"><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>
                        <span class="show_average_score">0.0</span>
                    </span>
                </div>

                <button type="submit" class="submit_rating w-full rounded-xl btn-main py-3 text-[15px] font-semibold transition">
                    {{ __('Submit Review') }}
                </button>
            </div>
        </div>

    </div>
</form>

@endsection

@section('script')
<script>
(function ($) {
    "use strict";

    const groups = {
        skill:         { input: '#skill_rating',         class: '.get_skill_val',         attr: 'skill_val' },
        availability:  { input: '#availability_rating',  class: '.get_availability_val',  attr: 'availability_val' },
        communication: { input: '#communication_rating', class: '.get_communication_val', attr: 'communication_val' },
        work_quality:  { input: '#work_quality_rating',  class: '.get_work_quality_val',  attr: 'work_quality_val' },
        deadline:      { input: '#deadline_rating',      class: '.get_deadline_val',      attr: 'deadline_val' },
        co_operation:  { input: '#co_operation_rating',  class: '.get_co_operation_val',  attr: 'co_operation_val' },
    };

    function updateSummary() {
        let count = 0, total = 0;
        Object.keys(groups).forEach(key => {
            const val = parseInt($(groups[key].input).val()) || 0;
            const dot  = document.getElementById('dot-' + key);
            const score = document.getElementById('score-' + key);
            if (val > 0) {
                count++; total += val;
                dot?.classList.add('rated');
                if (score) score.textContent = val + '/5';
            } else {
                dot?.classList.remove('rated');
                if (score) score.textContent = '—';
            }
        });
        const avg = count > 0 ? (total / count).toFixed(1) : '0.0';
        $('.show_average_score').text(avg);
    }

    Object.keys(groups).forEach(key => {
        const g = groups[key];
        $(document).on('click', g.class, function () {
            const val = $(this).data(g.attr);
            $(g.input).val(val);
            if (val > 0) {
                $(g.class).removeClass('selected');
                $(this).addClass('selected');
            } else {
                $(g.class).removeClass('selected');
            }
            updateSummary();
        });
    });

    $(document).on('click', '.submit_rating', function (e) {
        const skill = parseInt($('#skill_rating').val());
        const avail = parseInt($('#availability_rating').val());
        const comm  = parseInt($('#communication_rating').val());
        const qual  = parseInt($('#work_quality_rating').val());
        const dead  = parseInt($('#deadline_rating').val());
        const coop  = parseInt($('#co_operation_rating').val());
        if (skill < 1 && avail < 1 && comm < 1 && qual < 1 && dead < 1 && coop < 1) {
            toastr.warning("{{ __('Please select at least one rating item') }}", "Warning!");
            e.preventDefault();
        }
    });

}(jQuery));
</script>
@endsection