@extends('layouts.app')

@section('title', 'Employee Salaries')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <span class="current">Employee Salaries</span>
    </div>
@endsection

@section('content')
<div class="space-y-5" x-data="{ search: '{{ request('search') }}' }">
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Employee Salaries</h1>
            <p class="text-sm text-gray-500 mt-1">Manage salary structures for all employees</p>
        </div>
        <a href="{{ route('payroll.salaries.bulk') }}" class="btn-secondary">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            Bulk Revision
        </a>
    </div>

    {{-- Search --}}
    <div class="card">
        <div class="card-body py-3">
            <form method="GET" class="flex gap-3">
                <input type="text" name="search" x-model="search" placeholder="Search by name or employee code..." class="form-input flex-1" value="{{ request('search') }}">
                <button type="submit" class="btn-primary">Search</button>
                @if(request('search'))
                    <a href="{{ route('payroll.salaries.index') }}" class="btn-secondary">Clear</a>
                @endif
            </form>
        </div>
    </div>

    {{-- Employees Table --}}
    <div class="card">
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Department</th>
                        <th>Designation</th>
                        <th class="text-right">Basic (OMR)</th>
                        <th class="text-right">Total (OMR)</th>
                        <th>Status</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($employees as $emp)
                    @php
                        $currentSalaries = $emp->employeeSalaries->where('effective_to', null);
                        $basic = $currentSalaries->firstWhere('salaryComponent.code', 'BASIC');
                        $total = $currentSalaries->sum('amount');
                    @endphp
                    <tr>
                        <td>
                            <div class="flex items-center gap-3">
                                <div class="avatar avatar-sm {{ ['A','B','C','D' => 'bg-gradient-to-br from-primary-600 to-accent-500', 'E','F','G','H' => 'bg-gradient-to-br from-success-500 to-success-600', 'I','J','K','L' => 'bg-gradient-to-br from-violet-500 to-pink-500', 'M','N','O','P' => 'bg-gradient-to-br from-warning-500 to-danger-500'][substr($emp->first_name, 0, 1)] ?? 'bg-gradient-to-br from-accent-500 to-indigo-500' }}">
                                    {{ strtoupper(substr($emp->first_name, 0, 1)) }}
                                </div>
                                <div>
                                    <div class="font-medium text-gray-900">{{ $emp->full_name }}</div>
                                    <div class="text-xxs text-gray-400">{{ $emp->employee_code }}</div>
                                </div>
                            </div>
                        </td>
                        <td>{{ $emp->department->name ?? '—' }}</td>
                        <td>{{ $emp->designation->name ?? '—' }}</td>
                        <td class="text-right font-medium">{{ $basic ? number_format($basic->amount, 3) : '—' }}</td>
                        <td class="text-right font-medium text-gray-900">{{ $total > 0 ? number_format($total, 3) : '—' }}</td>
                        <td>
                            @if($total > 0)
                                <span class="badge badge-active"><span class="badge-dot"></span>Assigned</span>
                            @else
                                <span class="badge badge-pending"><span class="badge-dot"></span>Not Assigned</span>
                            @endif
                        </td>
                        <td class="text-right">
                            <div class="flex items-center justify-end gap-1">
                                <a href="{{ route('payroll.salaries.assign', $emp->id) }}" class="btn-icon" title="{{ $total > 0 ? 'Revise Salary' : 'Assign Salary' }}">
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                </a>
                                @if($total > 0)
                                <a href="{{ route('payroll.salaries.history', $emp->id) }}" class="btn-icon" title="Salary History">
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7">
                            <div class="empty-state py-10">
                                <p class="empty-state-title">No employees found</p>
                                <p class="empty-state-text">Add employees in the HR module first.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($employees->hasPages())
            <div class="px-5 py-3 border-t border-gray-100">
                {{ $employees->links() }}
            </div>
        @endif
    </div>
</div>
@endsection