@extends('layouts.salary-app')

@section('title', 'Create Super Deduction')

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="bg-gradient-to-r from-red-600 to-red-700 px-6 py-4">
            <h2 class="text-xl font-bold text-white flex items-center gap-2">
                <i class="fas fa-exclamation-triangle"></i>
                Super Deduction Form
            </h2>
            <p class="text-red-100 text-sm mt-1">For amounts exceeding KES 45,000 - Requires administrative approval</p>
        </div>
        
        <form method="POST" action="{{ route('salary.super-deductions.store') }}" class="p-6 space-y-5">
            @csrf
            
            <div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded">
                <div class="flex items-start gap-3">
                    <i class="fas fa-info-circle text-amber-600 text-xl mt-0.5"></i>
                    <div>
                        <p class="font-semibold text-amber-800">Important Notice</p>
                        <p class="text-sm text-amber-700 mt-1">
                            Super deductions are for amounts exceeding the standard limit of KES 45,000. 
                            These deductions require additional approval from HR or Administration.
                        </p>
                    </div>
                </div>
            </div>
            
            @if(old('amount') && old('amount') > 45000)
            <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
                <div class="flex items-start gap-3">
                    <i class="fas fa-exclamation-circle text-red-600 text-xl mt-0.5"></i>
                    <div>
                        <p class="font-semibold text-red-800">Amount Exceeds Standard Limit</p>
                        <p class="text-sm text-red-700 mt-1">
                            You are trying to deduct KES {{ number_format(old('amount'), 2) }} which exceeds the standard limit of KES 45,000.00.
                            Please provide justification below.
                        </p>
                    </div>
                </div>
            </div>
            @endif
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Employee <span class="text-red-500">*</span></label>
                <select name="employee_id" required class="w-full border border-slate-300 rounded-lg px-3 py-2 @error('employee_id') border-red-500 @enderror">
                    <option value="">Select Employee</option>
                    @foreach($employees as $emp)
                    <option value="{{ $emp->id }}" {{ (old('employee_id', $employee->id ?? '') == $emp->id) ? 'selected' : '' }}>
                        {{ $emp->name }} - {{ $emp->position }} ({{ $emp->employee_id }})
                    </option>
                    @endforeach
                </select>
                @error('employee_id')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Reason <span class="text-red-500">*</span></label>
                <input type="text" name="reason" value="{{ old('reason') }}" required 
                       placeholder="e.g., Major equipment loss, Large loan recovery"
                       class="w-full border border-slate-300 rounded-lg px-3 py-2 @error('reason') border-red-500 @enderror">
                @error('reason')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Amount (KES) <span class="text-red-500">*</span></label>
                    <input type="number" name="amount" value="{{ old('amount') }}" required step="0.01"
                           class="w-full border border-slate-300 rounded-lg px-3 py-2 @error('amount') border-red-500 @enderror">
                    @error('amount')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Type <span class="text-red-500">*</span></label>
                    <select name="type" required class="w-full border border-slate-300 rounded-lg px-3 py-2 @error('type') border-red-500 @enderror">
                        <option value="penalty" {{ old('type') == 'penalty' ? 'selected' : '' }}>Penalty / Fine</option>
                        <option value="loan" {{ old('type') == 'loan' ? 'selected' : '' }}>Loan Recovery</option>
                        <option value="advance_recovery" {{ old('type') == 'advance_recovery' ? 'selected' : '' }}>Advance Payment Recovery</option>
                        <option value="loss" {{ old('type') == 'loss' ? 'selected' : '' }}>Loss / Damage</option>
                        <option value="other" {{ old('type') == 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                    @error('type')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Deduction Date <span class="text-red-500">*</span></label>
                <input type="date" name="deduction_date" value="{{ old('deduction_date', date('Y-m-d')) }}" required
                       class="w-full border border-slate-300 rounded-lg px-3 py-2 @error('deduction_date') border-red-500 @enderror">
                @error('deduction_date')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Justification for Super Deduction <span class="text-red-500">*</span></label>
                <textarea name="special_notes" rows="4" required
                          placeholder="Explain why this deduction exceeds the standard limit of KES 45,000 and why it should be approved."
                          class="w-full border border-slate-300 rounded-lg px-3 py-2 @error('special_notes') border-red-500 @enderror">{{ old('special_notes') }}</textarea>
                @error('special_notes')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
                <p class="text-xs text-slate-500 mt-1">This justification will be reviewed by the approval team.</p>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Description (Optional)</label>
                <textarea name="description" rows="3" 
                          placeholder="Additional details about this deduction"
                          class="w-full border border-slate-300 rounded-lg px-3 py-2">{{ old('description') }}</textarea>
            </div>
            
            <div class="bg-slate-50 p-4 rounded-lg">
                <div class="flex items-center gap-3">
                    <input type="checkbox" name="requires_director_approval" value="1" id="director_approval" 
                           class="rounded border-slate-300 text-red-600 focus:ring-red-500">
                    <label for="director_approval" class="text-sm text-slate-700">
                        This deduction requires director-level approval
                    </label>
                </div>
                <p class="text-xs text-slate-500 mt-2 ml-6">
                    Check this if the deduction amount exceeds KES 100,000 or involves sensitive circumstances.
                </p>
            </div>
            
            <div class="flex justify-end gap-3 pt-4 border-t">
                <a href="{{ route('salary.deductions.index') }}" class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50">
                    Cancel
                </a>
                <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                    <i class="fas fa-paper-plane mr-1"></i> Submit Super Deduction
                </button>
            </div>
        </form>
    </div>
</div>
@endsection