@extends('layouts.app')

@section('title', 'Override Payroll Item — ' . $item->employee->full_name)

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('payroll.index') }}">Payroll</a>
        <span class="separator">/</span>
        <a href="{{ route('payroll.review', $batch->id) }}">{{ \Carbon\Carbon::createFromDate($batch->year, $batch->month, 1)->format('F Y') }}</a>
        <span class="separator">/</span>
        <span class="current">Override: {{ $item->employee->full_name }}</span>
    </div>
@endsection

@section('content')
<div class="max-w-3xl" x-data="overrideForm()">
    <h1 class="font-display text-2xl font-semibold text-gray-900 mb-1">Override Payroll Item</h1>
    <p class="text-sm text-gray-500 mb-5">{{ $item->employee->full_name }} ({{ $item->employee->employee_code }}) — {{ \Carbon\Carbon::createFromDate($batch->year, $batch->month, 1)->format('F Y') }}</p>

    <form action="{{ route('payroll.override.store', [$batch->id, $item->id]) }}" method="POST">
        @csrf

        {{-- Attendance Summary (Read-only) --}}
        <div class="card mb-4">
            <div class="card-header">
                <h2 class="card-header-title">Attendance Summary</h2>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <div class="text-center p-2 bg-gray-50 rounded-lg">
                        <div class="text-lg font-bold text-gray-900">{{ number_format($item->days_worked, 1) }}</div>
                        <div class="text-xxs text-gray-500">Days Worked</div>
                    </div>
                    <div class="text-center p-2 bg-gray-50 rounded-lg">
                        <div class="text-lg font-bold text-danger-500">{{ number_format($item->days_absent, 1) }}</div>
                        <div class="text-xxs text-gray-500">Days Absent</div>
                    </div>
                    <div class="text-center p-2 bg-gray-50 rounded-lg">
                        <div class="text-lg font-bold text-warning-600">{{ number_format($item->days_leave, 1) }}</div>
                        <div class="text-xxs text-gray-500">Days Leave</div>
                    </div>
                    <div class="text-center p-2 bg-gray-50 rounded-lg">
                        <div class="text-lg font-bold text-primary-600">{{ number_format($item->overtime_hours, 1) }}</div>
                        <div class="text-xxs text-gray-500">OT Hours</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Earnings --}}
        <div class="card mb-4">
            <div class="card-header">
                <h2 class="card-header-title text-success-600">Earnings</h2>
            </div>
            <div class="card-body space-y-3">
                @foreach($item->earnings ?? [] as $code => $amount)
                <div class="flex items-center gap-4">
                    <div class="w-48 flex-shrink-0">
                        <span class="text-sm font-medium text-gray-700">{{ $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="earnings[{{ $code }}]" value="{{ old('earnings.' . $code, $amount) }}"
                                   step="0.001" min="0" class="form-input pl-12" @input="recalculate()">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Deductions --}}
        <div class="card mb-4">
            <div class="card-header">
                <h2 class="card-header-title text-danger-500">Deductions</h2>
            </div>
            <div class="card-body space-y-3">
                @foreach($item->deductions ?? [] as $code => $amount)
                <div class="flex items-center gap-4">
                    <div class="w-48 flex-shrink-0">
                        <span class="text-sm font-medium text-gray-700">{{ $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="deductions[{{ $code }}]" value="{{ old('deductions.' . $code, $amount) }}"
                                   step="0.001" min="0" class="form-input pl-12" @input="recalculate()">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Net Summary --}}
        <div class="card mb-4">
            <div class="card-body">
                <div class="flex items-center justify-between">
                    <span class="font-display text-lg font-semibold text-gray-800">Net Salary</span>
                    <span class="font-display text-2xl font-bold text-gray-900" x-text="'OMR ' + netFormatted">OMR {{ number_format($item->net_salary, 3) }}</span>
                </div>
            </div>
        </div>

        {{-- Override Reason --}}
        <div class="card mb-4">
            <div class="card-body">
                <label class="form-label">Reason for Override <span class="text-danger-500">*</span></label>
                <textarea name="override_notes" rows="3" class="form-input @error('override_notes') form-input-error @enderror" placeholder="Explain why you are overriding this payroll item..." required>{{ old('override_notes', $item->override_notes) }}</textarea>
                @error('override_notes') <p class="form-error">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" class="btn-primary">Save Override</button>
            <a href="{{ route('payroll.review', $batch->id) }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<script>
function overrideForm() {
    return {
        netFormatted: '{{ number_format($item->net_salary, 3) }}',
        recalculate() {
            let totalEarnings = 0, totalDeductions = 0;
            document.querySelectorAll('input[name^="earnings["]').forEach(i => totalEarnings += parseFloat(i.value) || 0);
            document.querySelectorAll('input[name^="deductions["]').forEach(i => totalDeductions += parseFloat(i.value) || 0);
            this.netFormatted = (totalEarnings - totalDeductions).toFixed(3);
        }
    }
}
</script>
@endsection