<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Earning Type | ZedBankOS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#146CAA',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 text-gray-800">
    @include('accounting.partials.sidebar')

    <div class="lg:ml-64">
        @include('accounting.partials.header', ['title' => 'Edit Earning Type', 'subtitle' => $earningType->name])

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

            @if ($errors->any())
                <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg shadow-sm">
                    <div class="font-bold mb-1">Please correct the following:</div>
                    <ul class="list-disc list-inside text-sm">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="max-w-4xl">
                <div class="mb-6 flex justify-between items-center">
                    <a href="{{ route('admin.accounting.payroll.earnings.types.index') }}" class="text-primary hover:text-blue-800 font-bold text-sm flex items-center transition-colors">
                        <i class="fas fa-arrow-left mr-2"></i> BACK TO EARNING TYPES
                    </a>
                    <span class="text-xs font-mono text-gray-400 bg-gray-100 px-2 py-1 rounded">CODE: {{ $earningType->code }}</span>
                </div>

                <form action="{{ route('admin.accounting.payroll.earnings.types.update', $earningType->id) }}" method="POST" class="space-y-6">
                    @csrf
                    @method('PUT')

                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                        <div class="p-6 border-b border-gray-100 bg-gray-50/50">
                            <h3 class="text-base font-bold text-gray-700 uppercase tracking-wider">Basic Configuration</h3>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Earning Name <span class="text-red-500">*</span></label>
                                    <input type="text" name="name" value="{{ old('name', $earningType->name) }}" required
                                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all"
                                           placeholder="e.g., Housing Allowance">
                                </div>

                                <div>
                                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Category Type <span class="text-red-500">*</span></label>
                                    <select name="type" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary outline-none transition-all">
                                        <option value="basic" {{ old('type', $earningType->type) == 'basic' ? 'selected' : '' }}>Basic Salary</option>
                                        <option value="allowance" {{ old('type', $earningType->type) == 'allowance' ? 'selected' : '' }}>Allowance</option>
                                        <option value="bonus" {{ old('type', $earningType->type) == 'bonus' ? 'selected' : '' }}>Bonus</option>
                                        <option value="commission" {{ old('type', $earningType->type) == 'commission' ? 'selected' : '' }}>Commission</option>
                                        <option value="gratuity" {{ old('type', $earningType->type) == 'gratuity' ? 'selected' : '' }}>Gratuity</option>
                                        <option value="overtime" {{ old('type', $earningType->type) == 'overtime' ? 'selected' : '' }}>Overtime</option>
                                        <option value="other" {{ old('type', $earningType->type) == 'other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Display Order (Sort Order)</label>
                                    <input type="number" name="sort_order" value="{{ old('sort_order', $earningType->sort_order) }}" min="0"
                                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary outline-none transition-all">
                                </div>

                                <div>
                                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Account Status</label>
                                    <select name="is_active" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary outline-none transition-all">
                                        <option value="1" {{ old('is_active', $earningType->is_active) ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ !old('is_active', $earningType->is_active) ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                            </div>

                            <div class="mt-6">
                                <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Description (Optional)</label>
                                <textarea name="description" rows="2" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="Briefly describe what this earning is for...">{{ old('description', $earningType->description) }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                        <div class="p-6 border-b border-gray-100 bg-gray-50/50">
                            <h3 class="text-base font-bold text-gray-700 uppercase tracking-wider">Statutory Applicability</h3>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <div class="p-4 rounded-xl border border-gray-100 bg-gray-50 hover:border-red-200 transition-colors">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <i class="fas fa-file-invoice-dollar text-red-500 mr-3 text-xl"></i>
                                            <div>
                                                <div class="font-bold text-gray-800 text-xs">PAYE</div>
                                            </div>
                                        </div>
                                        <select name="subjecttopaye" class="bg-white border border-gray-300 rounded px-2 py-1 text-xs font-bold outline-none focus:ring-2 focus:ring-red-500">
                                            <option value="Yes" {{ old('subjecttopaye', $earningType->subjecttopaye) == 'Yes' ? 'selected' : '' }}>Yes</option>
                                            <option value="No" {{ old('subjecttopaye', $earningType->subjecttopaye) == 'No' ? 'selected' : '' }}>No</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="p-4 rounded-xl border border-gray-100 bg-gray-50 hover:border-blue-200 transition-colors">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <i class="fas fa-piggy-bank text-blue-500 mr-3 text-xl"></i>
                                            <div>
                                                <div class="font-bold text-gray-800 text-xs">NAPSA</div>
                                            </div>
                                        </div>
                                        <select name="subjecttonapsa" class="bg-white border border-gray-300 rounded px-2 py-1 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="Yes" {{ old('subjecttonapsa', $earningType->subjecttonapsa) == 'Yes' ? 'selected' : '' }}>Yes</option>
                                            <option value="No" {{ old('subjecttonapsa', $earningType->subjecttonapsa) == 'No' ? 'selected' : '' }}>No</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="p-4 rounded-xl border border-gray-100 bg-gray-50 hover:border-emerald-200 transition-colors">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <i class="fas fa-hospital-user text-emerald-500 mr-3 text-xl"></i>
                                            <div>
                                                <div class="font-bold text-gray-800 text-xs">NHIMA</div>
                                            </div>
                                        </div>
                                        <select name="subjecttonhima" class="bg-white border border-gray-300 rounded px-2 py-1 text-xs font-bold outline-none focus:ring-2 focus:ring-emerald-500">
                                            <option value="Yes" {{ old('subjecttonhima', $earningType->subjecttonhima) == 'Yes' ? 'selected' : '' }}>Yes</option>
                                            <option value="No" {{ old('subjecttonhima', $earningType->subjecttonhima) == 'No' ? 'selected' : '' }}>No</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end items-center space-x-4">
                        <a href="{{ route('admin.accounting.payroll.earnings.types.index') }}" class="text-sm font-bold text-gray-400 hover:text-gray-600 uppercase tracking-widest transition-colors">
                            Cancel
                        </a>
                        <button type="submit" class="bg-primary text-white px-8 py-3 rounded-lg font-bold text-sm shadow-lg hover:shadow-xl hover:bg-opacity-90 transform hover:-translate-y-0.5 transition-all uppercase tracking-widest">
                            Update Configuration
                        </button>
                    </div>
                </form>
            </div>
        </main>
    </div>
</body>
</html>