@extends('layouts.app')

@section('title', 'Create Salary Breakdown')
@section('subtitle', 'Set up salary components and deductions for an employee')

@section('content')
<div class="max-w-6xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('hr.salary-breakdown') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Salary Breakdown
        </a>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
        </div>
    @endif

    <!-- Salary Breakdown Form -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-calculator text-blue-600 mr-2"></i>
                Create Salary Breakdown
            </h3>
        </div>
        
        <form method="POST" action="{{ route('hr.salary-breakdown.store') }}" class="p-6">
            @csrf
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Basic Information -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">Basic Information</h4>
                    
                    <div>
                        <label for="user_id" class="block text-sm font-medium text-gray-700 mb-2">Employee *</label>
                        <select id="user_id" name="user_id" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('user_id') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Employee</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" {{ old('user_id', isset($employee) ? $employee->id : '') == $employee->id ? 'selected' : '' }}>
                                    {{ $employee->full_name }} ({{ $employee->employee_id }})
                                </option>
                            @endforeach
                        </select>
                        @error('user_id')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="basic_salary" class="block text-sm font-medium text-gray-700 mb-2">Basic Salary (TZS) *</label>
                        <input type="number" id="basic_salary" name="basic_salary" step="0.01" min="0" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('basic_salary') border-red-500 ring-red-500 @enderror"
                               placeholder="250000.00" value="{{ old('basic_salary') }}">
                        @error('basic_salary')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="hourly_rate" class="block text-sm font-medium text-gray-700 mb-2">Hourly Rate (TZS)</label>
                        <input type="number" id="hourly_rate" name="hourly_rate" step="0.01" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('hourly_rate') border-red-500 ring-red-500 @enderror"
                               placeholder="Auto-calculated" value="{{ old('hourly_rate') }}">
                        <p class="text-xs text-gray-500 mt-1">Leave empty to auto-calculate from basic salary</p>
                        @error('hourly_rate')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="working_days_per_month" class="block text-sm font-medium text-gray-700 mb-2">Working Days/Month *</label>
                            <input type="number" id="working_days_per_month" name="working_days_per_month" min="1" max="31" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('working_days_per_month') border-red-500 ring-red-500 @enderror"
                                   value="{{ old('working_days_per_month', 22) }}">
                            @error('working_days_per_month')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="working_hours_per_day" class="block text-sm font-medium text-gray-700 mb-2">Working Hours/Day *</label>
                            <input type="number" id="working_hours_per_day" name="working_hours_per_day" min="1" max="24" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('working_hours_per_day') border-red-500 ring-red-500 @enderror"
                                   value="{{ old('working_hours_per_day', 8) }}">
                            @error('working_hours_per_day')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="overtime_rate_multiplier" class="block text-sm font-medium text-gray-700 mb-2">Overtime Rate Multiplier *</label>
                        <input type="number" id="overtime_rate_multiplier" name="overtime_rate_multiplier" step="0.01" min="1" max="5" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('overtime_rate_multiplier') border-red-500 ring-red-500 @enderror"
                               value="{{ old('overtime_rate_multiplier', 1.5) }}">
                        <p class="text-xs text-gray-500 mt-1">e.g., 1.5 = 1.5x hourly rate for overtime</p>
                        @error('overtime_rate_multiplier')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="effective_date" class="block text-sm font-medium text-gray-700 mb-2">Effective Date *</label>
                        <input type="date" id="effective_date" name="effective_date" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('effective_date') border-red-500 ring-red-500 @enderror"
                               value="{{ old('effective_date', date('Y-m-d')) }}">
                        @error('effective_date')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Allowances -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">Allowances</h4>
                    
                    <div>
                        <label for="bonus_amount" class="block text-sm font-medium text-gray-700 mb-2">Bonus Amount (TZS)</label>
                        <input type="number" id="bonus_amount" name="bonus_amount" step="0.01" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('bonus_amount') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('bonus_amount', 0) }}">
                        @error('bonus_amount')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="transport_allowance" class="block text-sm font-medium text-gray-700 mb-2">Transport Allowance (TZS)</label>
                        <input type="number" id="transport_allowance" name="transport_allowance" step="0.01" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('transport_allowance') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('transport_allowance', 0) }}">
                        @error('transport_allowance')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="housing_allowance" class="block text-sm font-medium text-gray-700 mb-2">Housing Allowance (TZS)</label>
                        <input type="number" id="housing_allowance" name="housing_allowance" step="0.01" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('housing_allowance') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('housing_allowance', 0) }}">
                        @error('housing_allowance')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="meal_allowance" class="block text-sm font-medium text-gray-700 mb-2">Meal Allowance (TZS)</label>
                        <input type="number" id="meal_allowance" name="meal_allowance" step="0.01" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('meal_allowance') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('meal_allowance', 0) }}">
                        @error('meal_allowance')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="medical_allowance" class="block text-sm font-medium text-gray-700 mb-2">Medical Allowance (TZS)</label>
                        <input type="number" id="medical_allowance" name="medical_allowance" step="0.01" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('medical_allowance') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('medical_allowance', 0) }}">
                        @error('medical_allowance')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="other_allowances" class="block text-sm font-medium text-gray-700 mb-2">Other Allowances (TZS)</label>
                        <input type="number" id="other_allowances" name="other_allowances" step="0.01" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('other_allowances') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('other_allowances', 0) }}">
                        @error('other_allowances')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Deductions Section -->
            <div class="mt-8">
                <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2 mb-6">Deductions</h4>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="space-y-6">
                        <h5 class="text-md font-medium text-red-600">Percentage-based Deductions</h5>
                        
                        <div>
                            <label for="tax_rate" class="block text-sm font-medium text-gray-700 mb-2">Tax Rate (%) *</label>
                            <input type="number" id="tax_rate" name="tax_rate" step="0.01" min="0" max="100" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('tax_rate') border-red-500 ring-red-500 @enderror"
                                   value="{{ old('tax_rate', 10) }}">
                            @error('tax_rate')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="social_security_rate" class="block text-sm font-medium text-gray-700 mb-2">Social Security Rate (%) *</label>
                            <input type="number" id="social_security_rate" name="social_security_rate" step="0.01" min="0" max="100" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('social_security_rate') border-red-500 ring-red-500 @enderror"
                                   value="{{ old('social_security_rate', 5) }}">
                            @error('social_security_rate')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="pension_rate" class="block text-sm font-medium text-gray-700 mb-2">Pension Rate (%) *</label>
                            <input type="number" id="pension_rate" name="pension_rate" step="0.01" min="0" max="100" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('pension_rate') border-red-500 ring-red-500 @enderror"
                                   value="{{ old('pension_rate', 8) }}">
                            @error('pension_rate')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="space-y-6">
                        <h5 class="text-md font-medium text-red-600">Fixed Amount Deductions</h5>
                        
                        <div>
                            <label for="loan_deduction" class="block text-sm font-medium text-gray-700 mb-2">Loan Deduction (TZS)</label>
                            <input type="number" id="loan_deduction" name="loan_deduction" step="0.01" min="0"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('loan_deduction') border-red-500 ring-red-500 @enderror"
                                   placeholder="0.00" value="{{ old('loan_deduction', 0) }}">
                            @error('loan_deduction')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="advance_deduction" class="block text-sm font-medium text-gray-700 mb-2">Advance Deduction (TZS)</label>
                            <input type="number" id="advance_deduction" name="advance_deduction" step="0.01" min="0"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('advance_deduction') border-red-500 ring-red-500 @enderror"
                                   placeholder="0.00" value="{{ old('advance_deduction', 0) }}">
                            @error('advance_deduction')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="other_deductions" class="block text-sm font-medium text-gray-700 mb-2">Other Deductions (TZS)</label>
                            <input type="number" id="other_deductions" name="other_deductions" step="0.01" min="0"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('other_deductions') border-red-500 ring-red-500 @enderror"
                                   placeholder="0.00" value="{{ old('other_deductions', 0) }}">
                            @error('other_deductions')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notes Section -->
            <div class="mt-8">
                <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                <textarea id="notes" name="notes" rows="4"
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('notes') border-red-500 ring-red-500 @enderror"
                          placeholder="Additional notes about this salary breakdown...">{{ old('notes') }}</textarea>
                @error('notes')
                    <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Submit Button -->
            <div class="mt-8 flex justify-end">
                <button type="submit" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
                    <i class="fas fa-save mr-2"></i>
                    Create Salary Breakdown
                </button>
            </div>
        </form>
    </div>
</div>
@endsection