@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-slate-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        <!-- Header -->
        <div class="mb-8">
            <a href="javascript:history.back()" class="text-blue-600 hover:text-blue-700 text-sm font-semibold mb-4 inline-block">← Back</a>
            <div class="bg-white rounded-2xl p-6 shadow-sm">
                <h1 class="text-3xl font-bold text-slate-900">{{ $employer->company_name }}</h1>
                <p class="mt-2 text-slate-600">{{ $employer->industry ?? 'Healthcare' }}</p>
                
                @if(Auth::check())
                    <a href="{{ route('employers.rate.create', $employer) }}" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-blue-600 text-white px-4 py-2 font-semibold hover:bg-blue-700 transition">
                        <svg class="h-5 w-5" 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>
                        Write a Review
                    </a>
                @else
                    <a href="{{ route('login') }}" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-blue-600 text-white px-4 py-2 font-semibold hover:bg-blue-700 transition">
                        Sign in to Rate
                    </a>
                @endif
            </div>
        </div>

        <!-- Overall Stats -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
            <!-- Average Rating -->
            <div class="bg-white rounded-2xl p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-slate-600 text-sm font-semibold">Overall Rating</p>
                        <p class="mt-2 text-4xl font-bold text-slate-900">{{ $stats['average_overall'] }}</p>
                        <p class="mt-1 text-xs text-slate-500">Based on {{ $stats['total_ratings'] }} rating{{ $stats['total_ratings'] !== 1 ? 's' : '' }}</p>
                    </div>
                    <div class="text-5xl">⭐</div>
                </div>
            </div>

            <!-- Recommendation Rate -->
            <div class="bg-white rounded-2xl p-6 shadow-sm">
                <p class="text-slate-600 text-sm font-semibold">Would Recommend</p>
                <p class="mt-2 text-4xl font-bold text-emerald-600">{{ $stats['would_recommend_percent'] }}%</p>
                <p class="mt-1 text-xs text-slate-500">of healthcare workers recommend</p>
            </div>

            <!-- Verified Ratings -->
            <div class="bg-white rounded-2xl p-6 shadow-sm">
                <p class="text-slate-600 text-sm font-semibold">Verified Reviews</p>
                <p class="mt-2 text-4xl font-bold text-blue-600">{{ $stats['verified_count'] }}</p>
                <p class="mt-1 text-xs text-slate-500">from verified employees</p>
            </div>
        </div>

        <!-- Score Breakdown -->
        <div class="bg-white rounded-2xl p-6 shadow-sm mb-8">
            <h2 class="text-xl font-bold text-slate-900 mb-6">Rating Breakdown</h2>
            <div class="space-y-4">
                @php
                    $dimensions = [
                        'Overall Experience' => $stats['average_overall'],
                        'Fairness & Ethics' => $stats['average_fairness'],
                        'Communication' => $stats['average_communication'],
                        'Working Conditions' => $stats['average_conditions'],
                        'Support & Development' => $stats['average_support'],
                    ];
                @endphp

                @foreach($dimensions as $label => $score)
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <p class="text-sm font-semibold text-slate-700">{{ $label }}</p>
                            <p class="text-sm font-bold text-slate-900">{{ $score }}/5</p>
                        </div>
                        <div class="w-full bg-slate-200 rounded-full h-2.5">
                            <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-2.5 rounded-full transition-all" style="width: {{ ($score / 5) * 100 }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Reviews Section -->
        <div>
            <h2 class="text-2xl font-bold text-slate-900 mb-6">Reviews</h2>

            @if($ratings->isEmpty())
                <div class="rounded-2xl border-2 border-dashed border-slate-300 bg-white p-12 text-center">
                    <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                    </svg>
                    <p class="mt-4 text-slate-600">No reviews yet. Be the first to share your experience!</p>
                </div>
            @else
                <div class="space-y-4">
                    @foreach($ratings as $rating)
                        <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition border {{ $rating->is_verified_interaction ? 'border-emerald-200' : 'border-slate-200' }}">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white font-bold">
                                        {{ substr($rating->nurse->name, 0, 1) }}
                                    </div>
                                    <div>
                                        <p class="font-semibold text-slate-900">{{ $rating->nurse->name }}</p>
                                        <p class="text-xs text-slate-500">{{ $rating->created_at->diffForHumans() }}</p>
                                        @if($rating->is_verified_interaction)
                                            <span class="inline-flex items-center gap-1 mt-1 px-2 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-semibold">
                                                <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                                </svg>
                                                Verified
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                @if(Auth::check() && (Auth::user()->id === $rating->nurse_id || Auth::user()->isAdmin))
                                    <form method="POST" action="{{ route('ratings.destroy', $rating) }}" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-700 p-2" title="Delete review">
                                            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                            </svg>
                                        </button>
                                    </form>
                                @endif
                            </div>

                            <!-- Scores -->
                            <div class="grid grid-cols-5 gap-3 mb-4">
                                <div class="text-center">
                                    <p class="text-xs text-slate-500 mb-1">Overall</p>
                                    <div class="text-lg font-bold text-blue-600">{{ $rating->overall_score }}/5</div>
                                </div>
                                <div class="text-center">
                                    <p class="text-xs text-slate-500 mb-1">Fairness</p>
                                    <div class="text-lg font-bold text-slate-900">{{ $rating->fairness_score }}/5</div>
                                </div>
                                <div class="text-center">
                                    <p class="text-xs text-slate-500 mb-1">Communication</p>
                                    <div class="text-lg font-bold text-slate-900">{{ $rating->communication_score }}/5</div>
                                </div>
                                <div class="text-center">
                                    <p class="text-xs text-slate-500 mb-1">Conditions</p>
                                    <div class="text-lg font-bold text-slate-900">{{ $rating->conditions_score }}/5</div>
                                </div>
                                <div class="text-center">
                                    <p class="text-xs text-slate-500 mb-1">Support</p>
                                    <div class="text-lg font-bold text-slate-900">{{ $rating->support_score }}/5</div>
                                </div>
                            </div>

                            @if($rating->comment)
                                <p class="text-slate-700 mb-3">{{ $rating->comment }}</p>
                            @endif

                            @if($rating->would_recommend)
                                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-sm font-semibold">
                                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                    </svg>
                                    I would recommend this employer
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-8">
                    {{ $ratings->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection