@extends('layouts.app')

@section('title', 'Salary History — ' . $employee->full_name)

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('payroll.salaries.index') }}">Employee Salaries</a>
        <span class="separator">/</span>
        <span class="current">History: {{ $employee->full_name }}</span>
    </div>
@endsection

@section('content')
<div class="max-w-4xl space-y-5">
    {{-- Header --}}
    <div class="flex items-center gap-4">
        <div class="avatar avatar-lg bg-gradient-to-br from-primary-600 to-accent-500">
            {{ strtoupper(substr($employee->first_name, 0, 1)) }}
        </div>
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">{{ $employee->full_name }}</h1>
            <p class="text-sm text-gray-500">{{ $employee->employee_code }} · Salary Revision History</p>
        </div>
    </div>

    {{-- Current Salary --}}
    <div class="card border-primary-200 bg-primary-50/30">
        <div class="card-header border-primary-100">
            <h2 class="card-header-title text-primary-700">Current Salary</h2>
            <span class="text-xs text-gray-500">Effective from {{ $currentSalary->first() ? $currentSalary->first()->effective_from->format('d M Y') : '—' }}</span>
        </div>
        <div class="card-body">
            @if($currentSalary->isEmpty())
                <p class="text-sm text-gray-500">No salary assigned yet.</p>
            @else
                <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                    @foreach($currentSalary as $sal)
                    <div class="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-100">
                        <span class="text-sm text-gray-600">{{ $sal->component->name ?? '' }}</span>
                        <span class="text-sm font-semibold text-gray-900">{{ number_format($sal->amount, 3) }}</span>
                    </div>
                    @endforeach
                </div>
                <div class="mt-3 pt-3 border-t border-primary-100 flex items-center justify-between">
                    <span class="font-display font-semibold text-gray-800">Total Monthly</span>
                    <span class="font-display text-xl font-bold text-primary-700">OMR {{ number_format($currentSalary->sum('amount'), 3) }}</span>
                </div>
            @endif
        </div>
    </div>

    {{-- History Timeline --}}
    <div class="card">
        <div class="card-header">
            <h2 class="card-header-title">Revision History</h2>
        </div>
        <div class="card-body">
            @if($history->isEmpty())
                <div class="empty-state py-8">
                    <p class="empty-state-title">No revision history</p>
                    <p class="empty-state-text">Salary revisions will appear here as a timeline.</p>
                </div>
            @else
                <div class="space-y-4">
                    @foreach($history as $date => $revisions)
                    <div class="flex gap-4">
                        <div class="flex flex-col items-center">
                            <div class="w-3 h-3 rounded-full bg-primary-500 mt-1.5"></div>
                            <div class="w-px flex-1 bg-gray-200"></div>
                        </div>
                        <div class="flex-1 pb-4">
                            <div class="text-sm font-medium text-gray-900">{{ \Carbon\Carbon::parse($date)->format('d M Y') }}</div>
                            <div class="mt-1 text-xs text-gray-500">Total: OMR {{ number_format($revisions->sum('amount'), 3) }}</div>
                            <div class="mt-2 grid grid-cols-2 md:grid-cols-3 gap-2">
                                @foreach($revisions as $rev)
                                <div class="text-xs text-gray-600 bg-gray-50 px-2 py-1 rounded">
                                    {{ $rev->component->name ?? '' }}: <span class="font-semibold">{{ number_format($rev->amount, 3) }}</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    <a href="{{ route('payroll.salaries.index') }}" class="btn-secondary">← Back to Salaries</a>
</div>
@endsection