@php
    $salarySummary = $mySalarySummary ?? [];
    $timelineRows = $mySalaryTimelineRows ?? collect();
@endphp

<div class="space-y-5">
    <div class="grid gap-4 xl:grid-cols-2">
        <div class="rounded-xl border border-slate-200 bg-white p-5 flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Current Compensation</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">
                    ₹{{ number_format((float) ($salarySummary['current_compensation_annual'] ?? 0), 2) }}
                    <span class="text-base font-medium text-slate-500">/ Annum</span>
                </p>
            </div>
            <div>
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Pay Cycle</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">{{ $salarySummary['pay_cycle'] ?? 'Monthly' }}</p>
            </div>
        </div>
        
    </div>

    <div class="grid gap-4 xl:grid-cols-2">
        <div class="space-y-6 rounded-xl border border-slate-200 bg-white p-5">
            <h3 class="mb-5 text-lg font-semibold text-slate-900">Salary Timeline
                <p class="mt-1 text-sm text-slate-500">Recent salary revisions and gross breakup.</p>
            </h3>
            @forelse($timelineRows as $row)
                <div class="flex items-start gap-4">
                
                    <!-- Icon -->
                    <div class="relative z-10">
                        @if(!$loop->last)
                            <span class="absolute left-4 top-8 w-px bg-slate-300" style="height: 350%;"></span>
                        @endif
                        <span class="flex h-8 w-8 items-center justify-center rounded-full bg-violet-100 text-violet-700">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="h-4 w-4">
                                <path d="M416 224C398.3 224 384 209.7 384 192C384 174.3 398.3 160 416 160L576 160C593.7 160 608 174.3 608 192L608 352C608 369.7 593.7 384 576 384C558.3 384 544 369.7 544 352L544 269.3L374.6 438.7C362.1 451.2 341.8 451.2 329.3 438.7L224 333.3L86.6 470.6C74.1 483.1 53.8 483.1 41.3 470.6C28.8 458.1 28.8 437.8 41.3 425.3L201.3 265.3C213.8 252.8 234.1 252.8 246.6 265.3L352 370.7L498.7 224L416 224z"/>
                            </svg>
                        </span>
                    </div>

                    <!-- Content -->
                    <div class="flex-1">
                        <!-- Header -->
                        <p class="text-sm font-semibold text-slate-900">
                            Salary Revision -
                            <span class="text-xs text-slate-500">
                                Effective {{ $row['effective_date'] ?? '—' }}
                            </span>
                            @if($loop->first)
                                <span class="ml-2 inline-flex items-center rounded bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-600">
                                    Current
                                </span>
                            @endif
                        </p>

                        <!-- Card -->
                        <div class="mt-2 rounded-xl border border-slate-200 bg-white p-4">
                            <div class="grid items-center gap-2 sm:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr_1fr]">
                                <!-- Regular -->
                                <div>
                                    <p class="text-xs uppercase text-slate-500">Regular Salary</p>
                                    <p class="text-sm font-semibold">
                                        ₹{{ number_format((float) ($row['regular'] ?? 0), 2) }}
                                    </p>
                                </div>

                                <!-- + -->
                                <div class="text-center text-slate-400 font-semibold">+</div>

                                <!-- Other -->
                                <div>
                                    <p class="text-xs uppercase text-slate-500">Other</p>
                                    <p class="text-sm font-semibold">
                                        ₹{{ number_format((float) ($row['other'] ?? 0), 2) }}
                                    </p>
                                </div>

                                <!-- + -->
                                <div class="text-center text-slate-400 font-semibold">+</div>

                                <!-- Bonus -->
                                <div>
                                    <p class="text-xs uppercase text-slate-500">Bonus</p>
                                    <p class="text-sm font-semibold">
                                        ₹{{ number_format((float) ($row['bonus'] ?? 0), 2) }}
                                    </p>
                                </div>

                                <!-- = -->
                                <div class="text-center text-slate-500 font-bold">=</div>

                                <!-- Total -->
                                <div>
                                    <p class="text-xs uppercase text-slate-500">Total</p>
                                    <p class="text-sm font-semibold">
                                        ₹{{ number_format((float) ($row['total'] ?? 0), 2) }}
                                    </p>
                                </div>

                                <!-- Link -->
                                <div class="text-right">
                                    <a href="{{ $row['view_url'] ?? '#' }}" target="_blank"
                                    class="text-nowrap text-sm font-medium text-primary hover:underline {{ empty($row['view_url']) ? 'pointer-events-none opacity-50' : '' }}">
                                        View Salary Breakup
                                    </a>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            @empty
                <div class="rounded-xl border border-dashed border-slate-300 bg-slate-50 p-8 text-center text-sm text-slate-500">
                    Salary timeline is not available yet.
                </div>
            @endforelse
        </div>
    </div>
</div>