@extends('layouts.app')

@section('title', 'Create Payroll')
@section('subtitle', 'Create a new payroll record')

@section('content')
<div class="max-w-4xl 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.payroll') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Payroll
        </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

    <!-- Payroll 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-file-invoice-dollar text-blue-600 mr-2"></i>
                Create Payroll Record
            </h3>
        </div>
        
        <form method="POST" action="{{ route('hr.payroll.store') }}" class="p-6">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 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') == $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="payroll_period" class="block text-sm font-medium text-gray-700 mb-2">Payroll Period *</label>
                        <input type="month" id="payroll_period" name="payroll_period" value="{{ old('payroll_period', date('Y-m')) }}" 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('payroll_period') border-red-500 ring-red-500 @enderror">
                        @error('payroll_period')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="payroll_date" class="block text-sm font-medium text-gray-700 mb-2">Payroll Date *</label>
                        <input type="date" id="payroll_date" name="payroll_date" value="{{ old('payroll_date', date('Y-m-d')) }}" 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('payroll_date') border-red-500 ring-red-500 @enderror">
                        @error('payroll_date')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="working_days" class="block text-sm font-medium text-gray-700 mb-2">Working Days *</label>
                        <input type="number" id="working_days" name="working_days" value="{{ old('working_days', 22) }}" 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') border-red-500 ring-red-500 @enderror">
                        @error('working_days')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="days_worked" class="block text-sm font-medium text-gray-700 mb-2">Days Worked *</label>
                        <input type="number" id="days_worked" name="days_worked" value="{{ old('days_worked', 22) }}" min="0" 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('days_worked') border-red-500 ring-red-500 @enderror">
                        @error('days_worked')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Salary Information -->
                <div class="space-y-6">
                    <h4 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-2">Salary Information</h4>
                    
                    <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="overtime_pay" class="block text-sm font-medium text-gray-700 mb-2">Overtime Pay (TZS)</label>
                        <input type="number" id="overtime_pay" name="overtime_pay" 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('overtime_pay') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('overtime_pay', 0) }}">
                        @error('overtime_pay')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="bonus" class="block text-sm font-medium text-gray-700 mb-2">Bonus (TZS)</label>
                        <input type="number" id="bonus" name="bonus" 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') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('bonus', 0) }}">
                        @error('bonus')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="allowances" class="block text-sm font-medium text-gray-700 mb-2">Allowances (TZS)</label>
                        <input type="number" id="allowances" name="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('allowances') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('allowances', 0) }}">
                        @error('allowances')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="advance_salary" class="block text-sm font-medium text-gray-700 mb-2">Advance Salary (TZS)</label>
                        <input type="number" id="advance_salary" name="advance_salary" 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_salary') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('advance_salary', 0) }}">
                        @error('advance_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="0.00" value="{{ old('hourly_rate') }}">
                        @error('hourly_rate')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="overtime_hours" class="block text-sm font-medium text-gray-700 mb-2">Overtime Hours</label>
                        <input type="number" id="overtime_hours" name="overtime_hours" 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('overtime_hours') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('overtime_hours', 0) }}">
                        @error('overtime_hours')
                            <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 md:grid-cols-2 gap-6">
                    <div>
                        <label for="tax_deduction" class="block text-sm font-medium text-gray-700 mb-2">Tax Deduction (TZS)</label>
                        <input type="number" id="tax_deduction" name="tax_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('tax_deduction') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('tax_deduction', 0) }}">
                        @error('tax_deduction')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="social_security" class="block text-sm font-medium text-gray-700 mb-2">Social Security (TZS)</label>
                        <input type="number" id="social_security" name="social_security" 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('social_security') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('social_security', 0) }}">
                        @error('social_security')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="pension_contribution" class="block text-sm font-medium text-gray-700 mb-2">Pension Contribution (TZS)</label>
                        <input type="number" id="pension_contribution" name="pension_contribution" 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('pension_contribution') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00" value="{{ old('pension_contribution', 0) }}">
                        @error('pension_contribution')
                            <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>

            <!-- 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 payroll...">{{ 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 Payroll
                </button>
            </div>
        </form>
    </div>
</div>
@endsection