@extends('layouts.app')

@section('title', 'Salary Components')
@section('heading', 'Salary Components')

@section('content')
    @php
        $valueTypeLabels = [
            'fixed' => 'Fixed',
            'variable' => 'Variable',
            'basic_percent' => 'Basic Percent',
            'ctc_percent' => 'CTC Percent',
            'balancing_ctc' => 'Balancing Amount of CTC',
            'system_calculated' => 'System Calculated',
        ];
    @endphp
    <x-card>
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <p class="text-slate-600">Earnings and deductions setup.</p>
            <div class="flex flex-wrap items-center gap-2">
                @if(request('from') === 'settings')
                    <a href="{{ route('settings.home') }}" class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                        <i class="bi bi-arrow-left"></i> Back
                    </a>
                @else
                    <a href="{{ route('payroll.index', ['tab' => 'component']) }}" class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                        <i class="bi bi-arrow-left"></i> Back to Payroll
                    </a>
                @endif
                @if(auth()->user()->hasPermission('payrolls_create'))
                    <a href="{{ route('salary-components.create') }}" class="inline-flex items-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700"><i class="bi bi-plus-lg me-1"></i>Add Component</a>
                @endif
            </div>
        </div>
        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Type</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Value Type</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Default Amount</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Taxable</th>
                    <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($salaryComponents as $sc)
                <tr>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-900">{{ $sc->name }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ ucfirst($sc->type) }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $valueTypeLabels[$sc->value_type] ?? ucfirst(str_replace('_', ' ', (string) $sc->value_type)) }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ number_format($sc->default_amount, 2) }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm">{{ $sc->is_taxable ? 'Yes' : 'No' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
                        @if(auth()->user()->hasPermission('payrolls_edit'))
                            <a href="{{ route('salary-components.edit', $sc) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                        @endif
                        @if(auth()->user()->hasPermission('payrolls_delete'))
                            <form action="{{ route('salary-components.destroy', $sc) }}" method="POST" class="inline" onsubmit="return confirm('Delete this salary component?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-icon-action btn-icon-action--delete" title="Delete" aria-label="Delete"><i class="bi bi-trash3"></i></button>
                            </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">No salary components yet.</td></tr>
            @endforelse
        </x-table>
        @if($salaryComponents->hasPages())<div class="mt-4">{{ $salaryComponents->links() }}</div>@endif
    </x-card>
@endsection