@extends('layouts.app')

@section('title', 'See Salary - ' . config('app.name'))

@section('content')
    <div class="w-full bg-gray-50 min-h-screen pt-[120px] pb-20">
        <div class="w-full max-w-[1300px] mx-auto px-6 md:px-0 ">

            <div class="relative mb-12">
                <div class="flex flex-col lg:flex-row justify-between items-end gap-8 relative z-10">
                    <div class="max-w-2xl">
                        <div
                            class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[rgb(250,250,250)] text-green-700 text-xs font-bold mb-4 border border-green-200">
                            <span class="relative flex h-2 w-2">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
                                </span>
                                Updated 2h ago
                                </div>
                                <h1 class="text-4xl md:text-5xl font-bold text-[#1C2731] mb-4 tracking-tight">
                                    Global Salary Intelligence
                                </h1>
                                <p class="text-lg text-gray-600 leading-relaxed">
                                    Access verified compensation data from thousands of companies.
                                </p>
                                </div>
                                <div class="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
                                    @auth
                                        <a href="{{ route('dashboard.job-experiences.create') }}"
                                            class="w-full sm:w-auto bg-[#2F3D7E] hover:bg-[#2F3D7E]/90 px-6 py-3 rounded-lg font-bold text-white transition-all shadow-lg shadow-blue-900/20 flex items-center justify-center gap-2">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                            </svg>
                                            Contribute Salary
                                        </a>
                                    @else
                                        <button onclick="openRegisterModal()"
                                            class="w-full sm:w-auto bg-[#2F3D7E] hover:bg-[#2F3D7E]/90 px-6 py-3 rounded-lg font-bold text-white transition-all shadow-lg shadow-blue-900/20 flex items-center justify-center gap-2">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                            </svg>
                                            Contribute Salary
                                        </button>
                                    @endauth
                                </div>
                                </div>
                                </div>

                                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

                                    <div class="lg:col-span-3 space-y-6 lg:sticky lg:top-24">
                                        <div class="bg-white rounded-2xl p-5 shadow-xl shadow-gray-200/40 border border-gray-100">
                                            <div class="flex items-center gap-2 mb-6 text-[#2F3D7E] font-bold">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                                                </svg>
                                                <span>Filter Data</span>
                                            </div>
                                            @include('components.see-form')
                                            </div>

                                            {{-- ... Missing Data Card stays here ... --}}
                                            <div class="bg-[#2F3D7E] rounded-2xl p-5 text-white relative overflow-hidden">
                                                <div class="relative z-10">
                                                    <h3 class="font-bold text-lg mb-2">Missing data?</h3>
                                                    <p class="text-blue-100 text-sm mb-4">Help the community by contributing your anonymous salary data.
                                                    </p>
                                                    @auth
                                                        <a href="{{ route('dashboard.job-experiences.create') }}"
                                                            class="block w-full h-10 bg-white/10 hover:bg-white/20 text-white rounded-lg text-xs font-bold transition-colors flex items-center justify-center">
                                                            Add My Salary
                                                        </a>
                                                    @else
                                                        <button onclick="openRegisterModal()"
                                                            class="w-full h-10 bg-white/10 hover:bg-white/20 text-white rounded-lg text-xs font-bold transition-colors">
                                                            Add My Salary
                                                        </button>
                                                    @endauth
                                                </div>
                                                <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-blue-500/30 rounded-full blur-xl"></div>
                                            </div>
                                            </div>

                                            <div class="lg:col-span-9">
                                                {{--
                                                                                                                                                                    <div
                                                                                                                                                                        class="hidden md:grid grid-cols-12 gap-4 px-6 py-3 text-[10px] font-bold text-gray-400 uppercase tracking-wider bg-gray-100/50 rounded-lg mb-3 border border-gray-200/50">
                                                                                                                                                                        <div class="col-span-4">Location & Role</div>
                                                                                                                                                                        <div class="col-span-4 pl-4">Salary Range</div>
                                                                                                                                                                        <div class="col-span-2">Companies</div>
                                                                                                                                                                        <div class="col-span-2 text-right px-4">Action</div>
                                                                                                                                                                    </div> --}}

                                                <div class="space-y-3 mb-8">
                                                    @forelse($salaryData as $job)

                                                                                                                                                                                                    @php
                                                        $location = $job['location']['country'];
                                                        $flag = $job['location']['flag'];
                                                        $ai = $job['ai_market_data'];
                                                        $exp = $job['experience_data'];
                                                                                                                                                                                                    @endphp

                                                                                                                                                                                                            <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm mb-6 cursor-pointer" onclick=" @auth
                                                                                                                                                                                                                window.location.href='{{ route('view-salary', ['location' => $location, 'jobTitle' => $job['job_title'], 'state' => request('state'), 'city' => request('city'), 'currency' => request('currency'), 'pay_frequency' => request('pay_frequency')]) }}';
                                                                                                                                                                                                            @else
                                                                                                                                                                                                                openRegisterModal(`{{route('view-salary', ['location' => $location, 'jobTitle' => $job['job_title'], 'state' => request('state'), 'city' => request('city'), 'currency' => request('currency'), 'pay_frequency' => request('pay_frequency')]) }}`)
                                                                                                                                                                                                            @endauth">

                                                                                                                                                                                                                {{-- Header --}}
                                                                                                                                                                                                                <div class="flex items-center gap-3 mb-5">
                                                                                                                                                                                                                    <img src="{{ $flag }}" class="w-10 h-10 rounded-full object-cover" />
                                                                                                                                                                                                                    <div>
                                                                                                                                                                                                                        <h3 class="font-bold text-lg text-[#1C2731]">
                                                                                                                                                                                                                            {{ $job['job_title'] }} — {{ $location }}

                                                                                                                                                                                                                        </h3>
                                                                                                                                                                                                                        <p class="text-xs text-gray-500">
                                                                                                                                                                                                                            {{ $job['location']['state'] }} {{ $job['location']['city'] }}
                                                                                                                                                                                                                        </p>
                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                </div>

                                                                                                                                                                                                                {{-- ================= AI MARKET DATA ================= --}}
                                                                                                                                                                                                                @if($ai)

                                                                                                                                                                                                                    @php
                                                            $values = array_values($ai['chart']['values']);
                                                            $min = min($values);
                                                            $max = max($values);
                                                            $avg = $ai['market_average'];
                                                            $currency = $ai['currency'];

                                                            $range = $max > 0 ? $max : 1;
                                                            $left = ($min / $range) * 100;
                                                            $width = (($max - $min) / $range) * 100;
                                                            $avgPos = ($max - $min) > 0
                                                                ? (($avg - $min) / ($max - $min)) * 100
                                                                : 50;
                                                                                                                                                                                                                    @endphp



                                                                                                                                                                                                                                <div class="mb-6">
                                                                                                                                                                                                                                    <div class="flex justify-between items-center mb-2">
                                                                                                                                                                                                                                        <span class="text-xs font-semibold text-blue-600 uppercase">
                                                                                                                                                                                                                                            RateMyPay Market Estimate
                                                                                                                                                                                                                                        </span>
                                                                                                                                                                                                                                        <span class="text-xs text-gray-400">
                                                                                                                                                                                                                                            Based on market intelligence
                                                                                                                                                                                                                                        </span>
                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                            <div class="flex justify-between text-xs mb-2">
                                                                                                                                                                                                                                                <span>{{ $currency }} {{ number_format($min) }}</span>
                                                                                                                                                                                                                                                <span class="font-bold text-[#2F3D7E]">
                                                                                                                                                                                                                                                    {{ $currency }} {{ number_format($avg) }} (Avg)
                                                                                                                                                                                                                                                </span>
                                                                                                                                                                                                                                                <span>{{ $currency }} {{ number_format($max) }}</span>
                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                            <div class="h-2.5 bg-gray-100 rounded-full relative">
                                                                                                                                                                                                                                                <div class="absolute h-full bg-blue-200 rounded-full"
                                                                                                                                                                                                                                                    style="left: {{ $left }}%; width: {{ $width }}%;">
                                                                                                                                                                                                                                                </div>

                                                                                                                                                                                                                                                <div class="absolute h-4 w-1 bg-blue-700 -top-0.5 rounded-full"
                                                                                                                                                                                                                                                    style="left: calc({{ $left }}% + {{ $width * ($avgPos / 100) }}%);">
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                        </div>

                                                                                                                                                                                                                @endif

                                                                                                                                                                                                                    {{-- ================= COMMUNITY DATA ================= --}}
                                                                                                                                                                                                                    <div>
                                                                                                                                                                                                                        <div class="flex justify-between items-center mb-2">
                                                                                                                                                                                                                            <span class="text-xs font-semibold text-green-600 uppercase">
                                                                                                                                                                                                                                Community Reported Salaries
                                                                                                                                                                                                                            </span>
                                                                                                                                                                                                                            @if($exp)
                                                                                                                                                                                                                                <span class="text-xs text-gray-400">
                                                                                                                                                                                                                                    {{ $exp['companies'] }} companies
                                                                                                                                                                                                                                </span>
                                                                                                                                                                                                                            @endif
                                                                                                                                                                                                                        </div>

                                                                                                                                                                                                                        @if($exp)

                                                                                                                                                                                                                            @php
                                                            $min = $exp['min'];
                                                            $max = $exp['max'];
                                                            $avg = $exp['average'];
                                                            $currency = $exp['currency'];

                                                            $range = $max > 0 ? $max : 1;
                                                            $left = ($min / $range) * 100;
                                                            $width = (($max - $min) / $range) * 100;
                                                            $avgPos = ($max - $min) > 0
                                                                ? (($avg - $min) / ($max - $min)) * 100
                                                                : 50;
                                                                                                                                                                                                                            @endphp







                                                                                                                                                                                                                            <div class="flex justify-between text-xs mb-2">
                                                                                                                                                                                                                                <span>{{ $currency }} {{ number_format($min) }}</span>
                                                                                                                                                                                                                                <span class="font-bold text-green-700">
                                                                                                                                                                                                                                    {{ $currency }} {{ number_format($avg) }} (Avg)
                                                                                                                                                                                                                                </span>
                                                                                                                                                                                                                                <span>{{ $currency }} {{ number_format($max) }}</span>
                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                            <div class="h-2.5 bg-gray-100 rounded-full relative">
                                                                                                                                                                                                                                <div class="absolute h-full bg-green-200 rounded-full"
                                                                                                                                                                                                                                    style="left: {{ $left }}%; width: {{ $width }}%;">
                                                                                                                                                                                                                                </div>

                                                                                                                                                                                                                                <div class="absolute h-4 w-1 bg-green-700 -top-0.5 rounded-full"
                                                                                                                                                                                                                                    style="left: calc({{ $left }}% + {{ $width * ($avgPos / 100) }}%);">
                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                        @else

                                                                                                                                                                                                                            <div class="text-xs text-gray-400 italic">
                                                                                                                                                                                                                                No community data yet — be the first to contribute.
                                                                                                                                                                                                                                <a class="text-blue-600" href="{{ route('dashboard.job-experiences.create') }}">Click
                                                                                                                                                                                                                                    here</a>
                                                                                                                                                                                                                                </div>

                                                                                                                                                                                                                        @endif
                                                                                                                                                                                                                                </div>

                                                                                                                                                                                                                                </div>

                                                    @empty
                                                                                                                        <div class="text-center py-12">
                                                                                                                            <h3 class="text-lg font-bold text-gray-900">No salary data found</h3>
                                                                                                                        </div>
                                                                                                                        @endforelse

                                                </div>

                                    </div>
                                </div>

                                </div>
                                </div>
@endsection