@extends('layouts.app')

@section('title', 'Add Salary Record')

@section('content')
<div class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="py-6">
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-3xl font-bold text-gray-900">Add Salary Record</h1>
                <a href="{{ route('payroll.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i> Back to Payroll
                </a>
            </div>

            <form action="{{ route('payroll.store') }}" method="POST">
                @csrf
                <div class="space-y-6">
                    <!-- Employee Information -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h5 class="text-lg font-semibold mb-0">Employee Information</h5>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Employee *</label>
                                    <select name="user_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('user_id') border-red-500 @enderror" required>
                                        <option value="">Select Employee</option>
                                        @foreach($employees as $employee)
                                            <option value="{{ $employee->id }}" {{ old('user_id') == $employee->id ? 'selected' : '' }}>
                                                {{ $employee->full_name }} ({{ $employee->profile->employee_code ?? 'N/A' }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('user_id')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Employee Code</label>
                                    <input type="text" name="employee_code" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" value="{{ old('employee_code') }}" placeholder="Auto-generated">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Company *</label>
                                    <select name="company_name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('company_name') border-red-500 @enderror" required>
                                        <option value="">Select Company</option>
                                        @foreach($companies as $company)
                                            <option value="{{ $company->name }}" {{ old('company_name') == $company->name ? 'selected' : '' }}>
                                                {{ $company->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('company_name')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Account Type *</label>
                                    <select name="account_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('account_type') border-red-500 @enderror" required>
                                        <option value="CASH" {{ old('account_type') == 'CASH' ? 'selected' : '' }}>CASH</option>
                                        <option value="ACCOUNT" {{ old('account_type') == 'ACCOUNT' ? 'selected' : '' }}>ACCOUNT</option>
                                    </select>
                                    @error('account_type')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Payroll Period & Structure -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h5 class="text-lg font-semibold mb-0">Payroll Details</h5>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Payroll Period *</label>
                                    <select name="payroll_period_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('payroll_period_id') border-red-500 @enderror" required>
                                        <option value="">Select Period</option>
                                        @foreach($periods as $period)
                                            <option value="{{ $period->id }}" {{ old('payroll_period_id') == $period->id ? 'selected' : '' }}>
                                                {{ $period->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('payroll_period_id')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Salary Structure *</label>
                                    <select name="salary_structure_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('salary_structure_id') border-red-500 @enderror" required>
                                        <option value="">Select Structure</option>
                                        @foreach($structures as $structure)
                                            <option value="{{ $structure->id }}" {{ old('salary_structure_id') == $structure->id ? 'selected' : '' }}>
                                                {{ $structure->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('salary_structure_id')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Month Days *</label>
                                    <input type="number" name="month_days" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('month_days') border-red-500 @enderror" 
                                           value="{{ old('month_days', 31) }}" min="1" max="31" required>
                                    @error('month_days')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Days Paid *</label>
                                    <input type="number" name="days_paid" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('days_paid') border-red-500 @enderror" 
                                           value="{{ old('days_paid') }}" min="0" max="31" required>
                                    @error('days_paid')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Salary Details -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h5 class="text-lg font-semibold mb-0">Salary Details</h5>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Monthly Salary *</label>
                                    <input type="number" name="monthly_salary" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('monthly_salary') border-red-500 @enderror" 
                                           value="{{ old('monthly_salary') }}" step="0.01" min="0" required>
                                    @error('monthly_salary')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Basic *</label>
                                    <input type="number" name="basic" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('basic') border-red-500 @enderror" 
                                           value="{{ old('basic') }}" step="0.01" min="0" required>
                                    @error('basic')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">VDA *</label>
                                    <input type="number" name="vda" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('vda') border-red-500 @enderror" 
                                           value="{{ old('vda') }}" step="0.01" min="0" required>
                                    @error('vda')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">HRA *</label>
                                    <input type="number" name="hra" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('hra') border-red-500 @enderror" 
                                           value="{{ old('hra') }}" step="0.01" min="0" required>
                                    @error('hra')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Skill Allowances</label>
                                    <input type="number" name="skill_allowances" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('skill_allowances') border-red-500 @enderror" 
                                           value="{{ old('skill_allowances', 0) }}" step="0.01" min="0">
                                    @error('skill_allowances')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Performance Allowance</label>
                                    <input type="number" name="performance_allowance" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('performance_allowance') border-red-500 @enderror" 
                                           value="{{ old('performance_allowance', 0) }}" step="0.01" min="0">
                                    @error('performance_allowance')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Additional 4 Hours</label>
                                    <input type="number" name="additional_4hrs" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('additional_4hrs') border-red-500 @enderror" 
                                           value="{{ old('additional_4hrs', 0) }}" step="0.01" min="0">
                                    @error('additional_4hrs')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Deductions -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h5 class="text-lg font-semibold mb-0">Deductions</h5>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">ESI Employee Share</label>
                                    <input type="number" name="esi_employee_share" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('esi_employee_share') border-red-500 @enderror" 
                                           value="{{ old('esi_employee_share', 0) }}" step="0.01" min="0">
                                    @error('esi_employee_share')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">ESI Employer Share</label>
                                    <input type="number" name="esi_employer_share" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('esi_employer_share') border-red-500 @enderror" 
                                           value="{{ old('esi_employer_share', 0) }}" step="0.01" min="0">
                                    @error('esi_employer_share')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">PF Employee (12%)</label>
                                    <input type="number" name="epf_employee_12_percent" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('epf_employee_12_percent') border-red-500 @enderror" 
                                           value="{{ old('epf_employee_12_percent', 0) }}" step="0.01" min="0">
                                    @error('epf_employee_12_percent')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Professional Tax *</label>
                                    <input type="number" name="professional_tax" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('professional_tax') border-red-500 @enderror" 
                                           value="{{ old('professional_tax', 200) }}" step="0.01" min="0" required>
                                    @error('professional_tax')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Advance</label>
                                    <input type="number" name="advance" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('advance') border-red-500 @enderror" 
                                           value="{{ old('advance', 0) }}" step="0.01" min="0">
                                    @error('advance')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Food/Snacks</label>
                                    <input type="number" name="food_snacks" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('food_snacks') border-red-500 @enderror" 
                                           value="{{ old('food_snacks', 0) }}" step="0.01" min="0">
                                    @error('food_snacks')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Uniform Deduction</label>
                                    <input type="number" name="uniform_deduction" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('uniform_deduction') border-red-500 @enderror" 
                                           value="{{ old('uniform_deduction', 0) }}" step="0.01" min="0">
                                    @error('uniform_deduction')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Rental</label>
                                    <input type="number" name="rental" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('rental') border-red-500 @enderror" 
                                           value="{{ old('rental', 0) }}" step="0.01" min="0">
                                    @error('rental')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Training Fees</label>
                                    <input type="number" name="training_fees" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('training_fees') border-red-500 @enderror" 
                                           value="{{ old('training_fees', 0) }}" step="0.01" min="0">
                                    @error('training_fees')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Additions -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h5 class="text-lg font-semibold mb-0">Additions</h5>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Attendance Bonus</label>
                                    <input type="number" name="attendance_bonus" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('attendance_bonus') border-red-500 @enderror" 
                                           value="{{ old('attendance_bonus', 0) }}" step="0.01" min="0">
                                    @error('attendance_bonus')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Shift Allowance</label>
                                    <input type="number" name="shift_allowance" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('shift_allowance') border-red-500 @enderror" 
                                           value="{{ old('shift_allowance', 0) }}" step="0.01" min="0">
                                    @error('shift_allowance')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Remarks -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h5 class="text-lg font-semibold mb-0">Remarks</h5>
                        </div>
                        <div class="p-6">
                            <textarea name="remarks" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="3" placeholder="Enter any remarks...">{{ old('remarks') }}</textarea>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <div class="p-6">
                            <div class="flex justify-between">
                                <a href="{{ route('payroll.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                                    <i class="fas fa-times mr-2"></i> Cancel
                                </a>
                                <div class="flex space-x-3">
                                    <button type="reset" class="inline-flex items-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors">
                                        <i class="fas fa-undo mr-2"></i> Reset
                                    </button>
                                    <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                        <i class="fas fa-save mr-2"></i> Save Salary Record
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Auto-calculate gross wages when salary components change
    $('input[name="basic"], input[name="vda"], input[name="hra"], input[name="skill_allowances"], input[name="performance_allowance"], input[name="additional_4hrs"]').on('input', function() {
        calculateGrossWages();
    });
    
    // Auto-calculate total deductions when deduction components change
    $('input[name^="esi_"], input[name="epf_employee_12_percent"], input[name="professional_tax"], input[name="advance"], input[name="food_snacks"], input[name="uniform_deduction"], input[name="rental"], input[name="training_fees"]').on('input', function() {
        calculateTotalDeductions();
    });
    
    // Auto-calculate total additions when addition components change
    $('input[name="attendance_bonus"], input[name="shift_allowance"]').on('input', function() {
        calculateTotalAdditions();
    });
    
    function calculateGrossWages() {
        const basic = parseFloat($('input[name="basic"]').val()) || 0;
        const vda = parseFloat($('input[name="vda"]').val()) || 0;
        const hra = parseFloat($('input[name="hra"]').val()) || 0;
        const skill = parseFloat($('input[name="skill_allowances"]').val()) || 0;
        const performance = parseFloat($('input[name="performance_allowance"]').val()) || 0;
        const additional = parseFloat($('input[name="additional_4hrs"]').val()) || 0;
        
        const gross = basic + vda + hra + skill + performance + additional;
        // You can display this in a preview field if needed
    }
    
    function calculateTotalDeductions() {
        const esi = parseFloat($('input[name="esi_employee_share"]').val()) || 0;
        const pf = parseFloat($('input[name="epf_employee_12_percent"]').val()) || 0;
        const pt = parseFloat($('input[name="professional_tax"]').val()) || 0;
        const advance = parseFloat($('input[name="advance"]').val()) || 0;
        const food = parseFloat($('input[name="food_snacks"]').val()) || 0;
        const uniform = parseFloat($('input[name="uniform_deduction"]').val()) || 0;
        const rental = parseFloat($('input[name="rental"]').val()) || 0;
        const training = parseFloat($('input[name="training_fees"]').val()) || 0;
        
        const total = esi + pf + pt + advance + food + uniform + rental + training;
        // You can display this in a preview field if needed
    }
    
    function calculateTotalAdditions() {
        const bonus = parseFloat($('input[name="attendance_bonus"]').val()) || 0;
        const shift = parseFloat($('input[name="shift_allowance"]').val()) || 0;
        
        const total = bonus + shift;
        // You can display this in a preview field if needed
    }
});
</script>
@endsection