@extends('layouts.dashboard')

@section('content')
                <div class="max-w-5xl mx-auto md:mt-10 mt-20 px-6 pb-20">

                    {{-- Back Link --}}
                    <a href="{{ route('dashboard.job-experiences.index') }}" 
                       class="inline-flex items-center gap-1 text-sm font-medium text-gray-500 hover:text-[#2F3D7E] mb-6 transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                        Back to experiences
                    </a>

                    <div class="bg-white rounded-[24px] shadow-sm border border-gray-100 overflow-hidden">

                        {{-- Header Section --}}
                        <div class="p-8 border-b border-gray-100 flex flex-col md:flex-row justify-between items-start gap-6">
                            <div>
                                <div class="flex items-center gap-3 mb-2">
                                    <h1 class="text-3xl font-bold text-[#2F3D7E]">{{ $experience->job_title }}</h1>

                                    {{-- Status Badge --}}
                                    @if($experience->is_published)
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
                                            Published
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 border border-gray-200">
                                            Draft
                                        </span>
                                    @endif
                                </div>

                                <div class="flex flex-wrap items-center gap-4 text-sm text-gray-600">
                                    <span class="flex items-center gap-1.5">
                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                                        {{ $experience->company_name }}
                                    </span>
                                    <span class="w-1 h-1 rounded-full bg-gray-300"></span>
                                    <span class="flex items-center gap-1.5">
                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                        @if($experience->city || $experience->state || $experience->country)
                                            {{ $experience->country }}
                                            @if($experience->city || $experience->state || $experience->post_code)
                                                (
                                                {{ $experience->city }}
                                                {{ $experience->city && $experience->state ? ', ' : '' }}
                                                {{ $experience->state }}
                                                {{ ($experience->city || $experience->state) && $experience->post_code ? ', ' : '' }}
                                                {{ $experience->post_code }}
                                                )
                                            @endif
                                        @endif
                                    </span>
                                </div>
                            </div>

                            {{-- Action Buttons --}}
                            <div class="flex items-center gap-3 w-full md:w-auto">
                                <form action="{{ route('dashboard.job-experiences.toggle', $experience->id) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium border transition-colors
                                        {{ $experience->is_published
    ? 'border-red-200 text-red-700 bg-red-50 hover:bg-red-100'
    : 'border-green-200 text-green-700 bg-green-50 hover:bg-green-100' }}">
                                        {{ $experience->is_published ? 'Unpublish' : 'Publish Now' }}
                                    </button>
                                </form>

                                <a href="{{ route('dashboard.job-experiences.edit', $experience->id) }}" 
                                   class="px-4 py-2 bg-[#2F3D7E] hover:bg-[#1E2858] text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
                                    Edit Details
                                </a>

                                <form action="{{ route('dashboard.job-experiences.destroy', $experience->id) }}" method="POST"
                                    onsubmit="return confirm('Are you sure you want to delete this experience? This cannot be undone.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="Delete">
                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                    </button>
                                </form>
                            </div>
                        </div>

                        <div class="p-8 grid grid-cols-1 lg:grid-cols-3 gap-8">

                            {{-- Left Column: General Info --}}
                            <div class="lg:col-span-2 space-y-8">

                                {{-- Role Details --}}
                                <section>
                                    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Role Overview</h3>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8">
                                        <div>
                                            <span class="block text-sm text-gray-500 mb-1">Seniority Level</span>
                                            <span class="font-medium text-gray-900">{{ $experience->level }}</span>
                                        </div>
                                        <div>
                                            <span class="block text-sm text-gray-500 mb-1">Employment Type</span>
                                            <span
                                                class="font-medium text-gray-900">{{ ucwords(str_replace('_', ' ', $experience->employment_type)) }}</span>
                                        </div>
                                        <div>
                                            <span class="block text-sm text-gray-500 mb-1">Work Arrangement</span>
                                            <span
                                                class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-50 text-blue-700">
                                                {{ ucfirst($experience->work_arrangement) }}
                                            </span>
                                        </div>
                                        <div>
                                            <span class="block text-sm text-gray-500 mb-1">Work Status</span>
                                            <span
                                                class="font-medium text-gray-900">{{ ucwords(str_replace('_', ' ', $experience->work_status)) }}</span>
                                        </div>
                                        <div class="md:col-span-2">
                                            {{-- Duration --}}
                                            <div class="flex items-center gap-2 text-sm text-gray-600 mb-6">
                                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                </svg>
                                                <span class="font-medium">
                                                    {{ date('M Y', mktime(0, 0, 0, $experience->employment_month, 1, $experience->employment_year)) }}
                                                </span>
                                                <span>→</span>
                                                <span class="font-medium">
                                                    @if($experience->still_employed)
                                                        Present
                                                    @else
                                                        {{ date('M Y', mktime(0, 0, 0, $experience->end_month, 1, $experience->end_year)) }}
                                                    @endif
                                                </span>
                                                <span class="text-gray-400 ml-2">
                                                    @php
                                                        $startDate = \Carbon\Carbon::create($experience->employment_year, $experience->employment_month, 1);
                                                        $endDate = $experience->still_employed
                                                            ? \Carbon\Carbon::now()
                                                            : \Carbon\Carbon::create($experience->end_year, $experience->end_month, 1);
                                                        $duration = $startDate->diffInMonths($endDate);
                                                        $years = floor($duration / 12);
                                                        $months = $duration % 12;
                                                    @endphp
                                                    ({{ $years > 0 ? $years . 'y ' : '' }}{{ $months }}m)
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </section>

                                <hr class="border-gray-100">

                                {{-- Descriptions --}}
                                <section>
                                    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Additional Details</h3>

                                    <div class="space-y-6">
                                        @if($experience->job_description)
                                            <div>
                                                <span class="block text-sm text-gray-500 mb-2">Job Description</span>
                                                <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-line bg-gray-50 p-4 rounded-xl border border-gray-100">
                                                    {{ $experience->job_description }}
                                                </div>
                                            </div>
                                        @endif

                                        @if($experience->benefits)
                                            <div>
                                                <span class="block text-sm text-gray-500 mb-2">Benefits & Perks</span>
                                                <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-line bg-gray-50 p-4 rounded-xl border border-gray-100">
                                                    {{ $experience->benefits }}
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                        {{-- Market Comparison Chart --}}
                                        @if($chart)
                                            <div class="mb-8 pb-8 border-b border-gray-200">
                                                                                    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Market Comparison</h3>



                                                <div class="bg-white p-6 rounded-lg border border-gray-200">
                                                    <div id="marketComparisonChart" class="w-full"></div>
                                                </div>
                                            </div>

                                            <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
                                            <script>
                                                document.addEventListener('DOMContentLoaded', function () {
                                                    const options = {
                                                        chart: { type: 'bar', height: 320, toolbar: { show: false } },
                                                        series: [{
                                                            name: 'Salary ({{ $chart['currency'] }})',
                                                            data: {!! json_encode(array_values($chart['values'])) !!}
                                                        }],
                                                        colors: [
                                                            '#EF4444', // red – very low / negative
                                                            '#F97316', // orange – low
                                                            '#EAB308', // yellow – market average
                                                            '#22C55E', // green – above market
                                                            '#16A34A', // dark green – top market
                                                        ],
                                                        plotOptions: {
                                                            bar: { borderRadius: 6, columnWidth: '45%', distributed: true }
                                                        },
                                                        dataLabels: {
                                                            enabled: true,
                                                            formatter: val => new Intl.NumberFormat().format(val),
                                                            style: { colors: ['#374151'], fontSize: '12px' }
                                                        },
                                                        xaxis: {
                                                            categories: {!! json_encode(array_keys($chart['values'])) !!},
                                                            title: { text: 'Market Percentiles' }
                                                        },
                                                        yaxis: {
                                                            labels: { formatter: val => new Intl.NumberFormat().format(val) },
                                                            title: { text: 'Annual Compensation' }
                                                        },
                                                        tooltip: {
                                                            y: { formatter: val => new Intl.NumberFormat().format(val) + ' {{ $chart['currency'] }}' }
                                                        }
                                                    };

                                                    new ApexCharts(
                                                        document.querySelector('#marketComparisonChart'),
                                                        options
                                                    ).render();
                                                });
                                            </script>
                                        @endif

                                        {{-- Salary Explanation Section --}}
                                        @if($marketComparison)
                                            <div class="mb-8">
                                                <h3 class="text-md font-semibold text-gray-900 mb-3">
                                                    How your pay compares to the market
                                                </h3>

                                                <div class="bg-[#F9FAFB] border border-gray-200 rounded-lg p-5 space-y-4">
                                                    <p class="text-sm text-gray-700">
                                                        Your total compensation is
                                                        <span class="font-semibold">
                                                            {{ number_format($job->total_compensation) }} {{ $marketComparison['currency'] }}
                                                        </span>.
                                                    </p>

                                                    <p class="text-sm text-gray-700">
                                                        The market median for this role is
                                                        <span class="font-semibold">
                                                            {{ number_format($marketComparison['percentiles']['p50']) }}
                                                            {{ $marketComparison['currency'] }}
                                                        </span>.
                                                    </p>

                                                    @php
    $positioning = $marketComparison['positioning'];
    $badgeMap = [
        'below_market' => ['bg-red-100', 'text-red-700', 'Below Market'],
        'at_market' => ['bg-green-100', 'text-green-700', 'At Market'],
        'above_market' => ['bg-blue-100', 'text-blue-700', 'Above Market'],
    ];
                                                    @endphp

                                                    <div class="flex items-center gap-3">
                                                        <span class="px-3 py-1 rounded-full text-xs font-semibold
                                                                                                    {{ $badgeMap[$positioning][0] ?? 'bg-gray-100' }}
                                                                                                    {{ $badgeMap[$positioning][1] ?? 'text-gray-700' }}">
                                                            {{ $badgeMap[$positioning][2] ?? 'Unknown' }}
                                                        </span>

                                                        <span class="text-xs text-gray-500">
                                                            Confidence score:
                                                            {{ (int) ($marketComparison['confidence_score'] * 100) }}%
                                                        </span>
                                                    </div>

                                                    <p class="text-xs text-gray-500">
                                                        This estimate is based on role, experience, location, industry, and
                                                        company size using current market data.
                                                    </p>
                                                </div>
                                            </div>
                                        @endif
                                </section>
                            </div>

                            {{-- Right Column: Compensation & Company --}}
                            <div class="space-y-6">

                                {{-- Compensation Card --}}
                                <div class="bg-[#F8FAFC] rounded-2xl p-6 border border-gray-100">
                                    <div class="flex items-center gap-2 mb-4 text-[#2F3D7E]">
                                        <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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                        <h3 class="font-bold">Total Compensation</h3>
                                    </div>

                                    <div class="mb-6">
                                        <span class="block text-xs text-gray-500 mb-1 uppercase tracking-wide">Base Salary</span>
                                        <span class="text-2xl font-bold text-gray-900">
                                            {{ $experience->currency }} {{ number_format($experience->annual_base_salary) }}
                                        </span>
                                        <span class="text-sm text-gray-500">/year</span>
                                    </div>

                                    <div class="space-y-3 pt-4 border-t border-gray-200">
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-500">Bonus</span>
                                            <span class="font-medium text-gray-900">
                                                {{ $experience->bonus_commission ? number_format($experience->bonus_commission) : '-' }}
                                            </span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-500">Overtime</span>
                                            <span class="font-medium text-gray-900">
                                                {{ $experience->overtime_pay ? number_format($experience->overtime_pay) : '-' }}
                                            </span>
                                        </div>
                                        <div class="flex justify-between items-center text-sm">
                                            <span class="text-gray-500">Equity</span>
                                            <span class="font-medium text-gray-900">
                                                {{ $experience->equity ? number_format($experience->equity) : '-' }}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                {{-- Company Stats --}}
                                <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
                                    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Company Profile</h3>

                                    <div class="space-y-4">
                                        <div>
                                            <span class="block text-xs text-gray-400">Industry</span>
                                            <span class="font-medium text-gray-800 text-sm">{{ $experience->industry ?? 'Not Listed' }}</span>
                                        </div>
                                        <div>
                                            <span class="block text-xs text-gray-400">Company Size</span>
                                            <span class="font-medium text-gray-800 text-sm">{{ $experience->company_size ?? 'Not Listed' }}</span>
                                        </div>
                                        <div>
                                            <span class="block text-xs text-gray-400">Total Experience</span>
                                            <span class="font-medium text-gray-800 text-sm">{{ $experience->years_of_experience }} Years</span>
                                        </div>
                                        <div>
                                            <span class="block text-xs text-gray-400">Years in Role</span>
                                            <span class="font-medium text-gray-800 text-sm">{{ $experience->number_of_years_as_employee }} Years</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
@endsection