@extends('layouts.app')

@section('title', ($currentSalary->isEmpty() ? 'Assign' : 'Revise') . ' Salary — ' . $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">{{ $currentSalary->isEmpty() ? 'Assign' : 'Revise' }}: {{ $employee->full_name }}</span>
    </div>
@endsection

@section('content')
<div class="max-w-4xl" x-data="salaryForm()">
    {{-- Employee Info Header --}}
    <div class="flex items-center gap-4 mb-5">
        <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 }} · {{ $employee->department->name ?? '' }} · {{ $employee->designation->name ?? '' }}</p>
        </div>
    </div>

    <form action="{{ route('payroll.salaries.store', $employee->id) }}" method="POST">
        @csrf

        {{-- Effective Date --}}
        <div class="card mb-4">
            <div class="card-body">
                <div class="max-w-xs">
                    <label class="form-label">Effective From <span class="text-danger-500">*</span></label>
                    <input type="date" name="effective_from" value="{{ old('effective_from', date('Y-m-d')) }}" class="form-input @error('effective_from') form-input-error @enderror" required>
                    @error('effective_from') <p class="form-error">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        {{-- Earnings --}}
        <div class="card mb-4">
            <div class="card-header">
                <h2 class="card-header-title text-success-600">
                    <svg class="w-5 h-5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    Earnings
                </h2>
            </div>
            <div class="card-body space-y-3">
                @foreach($earningComponents as $comp)
                @php $existing = $currentSalary->firstWhere('salary_component_id', $comp->id); @endphp
                <div class="flex items-center gap-4">
                    <div class="w-48 flex-shrink-0">
                        <span class="text-sm font-medium text-gray-700">{{ $comp->name }}</span>
                        <span class="badge badge-info ml-1">{{ $comp->code }}</span>
                    </div>
                    <div class="flex-1">
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-400">OMR</span>
                            <input type="number" name="amounts[{{ $comp->id }}]"
                                   value="{{ old('amounts.' . $comp->id, $existing->amount ?? '') }}"
                                   step="0.001" min="0"
                                   class="form-input pl-12"
                                   placeholder="0.000"
                                   @input="recalculate()">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Summary --}}
        <div class="card mb-4">
            <div class="card-body">
                <div class="flex items-center justify-between py-2">
                    <span class="font-display text-lg font-semibold text-gray-800">Total Monthly Salary</span>
                    <span class="font-display text-2xl font-bold text-gray-900" x-text="'OMR ' + totalFormatted">OMR 0.000</span>
                </div>
                @if(!$currentSalary->isEmpty())
                <div class="flex items-center justify-between py-2 border-t border-gray-100 mt-2">
                    <span class="text-sm text-gray-500">Previous Total</span>
                    <span class="text-sm text-gray-500">OMR {{ number_format($currentSalary->sum('amount'), 3) }}</span>
                </div>
                @endif
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex items-center gap-3">
            <button type="submit" class="btn-primary">
                {{ $currentSalary->isEmpty() ? 'Assign Salary' : 'Save Revision' }}
            </button>
            <a href="{{ route('payroll.salaries.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<script>
function salaryForm() {
    return {
        totalFormatted: '0.000',
        recalculate() {
            let total = 0;
            document.querySelectorAll('input[name^="amounts["]').forEach(input => {
                total += parseFloat(input.value) || 0;
            });
            this.totalFormatted = total.toFixed(3);
        },
        init() {
            this.recalculate();
        }
    }
}
</script>
@endsection