<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payroll Adjustments - {{ $selectedEmployee->first_name }} | 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',
                        gray50: '#FAF9F8',
                        gray100: '#F3F2F1',
                        gray200: '#EDEBE9',
                    }
                }
            }
        }
    </script>
    <style>
        .quickbooks-input { border: 1px solid #8C8C8C; border-radius: 4px; padding: 8px 12px; font-size: 14px; width: 100%; transition: all 0.2s; background-color: white; }
        .readonly-input { background-color: #F3F2F1; color: #605E5C; cursor: not-allowed; border: 1px solid #EDEBE9; }
        .quickbooks-select { border: 1px solid #8C8C8C; border-radius: 4px; padding: 8px 12px; font-size: 14px; width: 100%; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23605E5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat right 12px center/16px; }
        .quickbooks-table { border-collapse: separate; border-spacing: 0; width: 100%; }
        .quickbooks-table th { background-color: #F3F2F1; color: #605E5C; font-weight: 600; font-size: 12px; padding: 10px 16px; border-bottom: 1px solid #EDEBE9; text-align: left; }
        .quickbooks-table td { padding: 10px 16px; border-bottom: 1px solid #EDEBE9; font-size: 14px; color: #323130; }
        .form-section { background: white; border: 1px solid #EDEBE9; border-radius: 6px; padding: 20px; margin-bottom: 20px; }
        .info-label { font-size: 11px; font-weight: 700; color: #605E5C; margin-bottom: 4px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
        .section-title { font-size: 16px; font-weight: 400; color: #323130; border-left: 4px solid #146CAA; padding-left: 12px; margin-bottom: 20px; }
    </style>
</head>
<body class="bg-gray50 text-gray-800">
    @include('accounting.partials.sidebar')

    <div class="lg:ml-64">
        @include('accounting.partials.header', ['title' => 'Payroll Adjustments', 'subtitle' => $period->period_name])

        <main class="max-w-5xl mx-auto p-6">
            
            <div class="form-section">
                <div class="flex justify-between items-start mb-6">
                    <div class="flex items-center space-x-3">
                        <a href="{{ route('admin.accounting.payroll.runs.show', $runId) }}" class="text-gray-400 hover:text-primary transition-colors text-xl">
                            <i class="fas fa-chevron-circle-left"></i>
                        </a>
                        <h3 class="section-title mb-0">Employee Details</h3>
                    </div>
                    <div class="flex space-x-3">
                        <a href="{{ route('admin.accounting.payroll.runs.show', $runId) }}" class="bg-primary text-white px-5 py-2 rounded font-semibold text-sm hover:bg-opacity-90 transition">
                            Finish and Review Run
                        </a>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <div>
                        <span class="info-label">Employee Number</span>
                        <input type="text" class="quickbooks-input readonly-input" value="{{ $selectedEmployee->employee_number }}" readonly>
                    </div>
                    <div>
                        <span class="info-label">Full Name</span>
                        <p class="text-gray-900 pt-2">{{ $selectedEmployee->first_name }} {{ $selectedEmployee->last_name }}</p>
                    </div>
                    <div>
                        <span class="info-label">NRC Number</span>
                        <p class="text-gray-900 pt-2">{{ $selectedEmployee->national_id ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <span class="info-label">Employment Type</span>
                        <p class="text-gray-700 capitalize pt-2">{{ $selectedEmployee->employment_type }}</p>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title">Add Non Recurring Earnings</h3>
                <form action="{{ route('admin.accounting.payroll.preparation.store_adjustment', $period->id) }}" method="POST">
                    @csrf
                    <input type="hidden" name="employee_id" value="{{ $selectedEmployee->id }}">
                    <input type="hidden" name="run_id" value="{{ $runId }}">

                    <div class="flex flex-wrap md:flex-nowrap items-end gap-4">
                        <div class="flex-1 min-w-[250px]">
                            <label class="info-label">Earning Type</label>
                            <select name="earning_type_id" class="quickbooks-select" required>
                                <option value="">Select Type (Overtime, Bonus, etc.)</option>
                                @foreach($earningTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="flex-1 min-w-[200px]">
                            <label class="info-label">Amount (ZMW)</label>
                            <input type="number" step="0.01" name="amount" class="quickbooks-input" placeholder="0.00" required>
                        </div>

                        <div>
                            <button type="submit" class="bg-primary text-white px-8 py-[10px] rounded font-bold text-sm hover:bg-opacity-90 transition whitespace-nowrap">
                                <i class="fas fa-plus mr-1"></i> Add to Run
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <div class="form-section">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="section-title mb-0">Earnings Summary for this Run</h3>
                    <div class="text-right">
                        <span class="info-label">Total Gross for Period</span>
                        <span class="text-2xl font-medium text-primary">
                            ZMW {{ number_format($payrollEntries->sum('earning_amount'), 2) }}
                        </span>
                    </div>
                </div>
                
                <div class="overflow-x-auto rounded border border-gray-200">
                    <table class="quickbooks-table">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Category</th>
                                <th>PAYE</th>
                                <th>NAPSA</th>
                                <th>NHIMA</th>
                                <th class="text-right">Amount (ZMW)</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($payrollEntries as $entry)
                            <tr>
                                <td class="text-gray-800">{{ $entry->earning_type }}</td>
                                <td class="text-[10px] font-bold {{ $entry->calculation_status === 'manual_adjustment' ? 'text-blue-500' : 'text-gray-400' }} uppercase tracking-widest">
                                    {{ $entry->calculation_status === 'manual_adjustment' ? 'One-Time' : 'Recurring' }}
                                </td>
                                <td>
                                    <span class="text-[10px] {{ $entry->subjecttopaye == 'Yes' ? 'text-red-600' : 'text-green-600' }} font-bold uppercase">
                                        {{ $entry->subjecttopaye }}
                                    </span>
                                </td>
                                <td>
                                    <span class="text-[10px] {{ $entry->subjecttonapsa == 'Yes' ? 'text-red-600' : 'text-green-600' }} font-bold uppercase">
                                        {{ $entry->subjecttonapsa }}
                                    </span>
                                </td>
                                <td>
                                    <span class="text-[10px] {{ $entry->subjecttonhima == 'Yes' ? 'text-red-600' : 'text-green-600' }} font-bold uppercase">
                                        {{ $entry->subjecttonhima }}
                                    </span>
                                </td>
                                <td class="text-right font-mono font-medium">
                                    {{ number_format($entry->earning_amount, 2) }}
                                </td>
                                <td class="text-center">
                                    @if($entry->calculation_status === 'manual_adjustment')
                                    <form action="{{ route('admin.accounting.payroll.preparation.destroy_entry', $entry->id) }}" method="POST" onsubmit="return confirm('Remove this adjustment from the payroll run?')">
                                        @csrf @method('DELETE')
                                        <button class="text-red-400 hover:text-red-600 transition-colors">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                    @else
                                    <span class="text-gray-300 italic text-[10px] uppercase">Fixed</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-8 text-gray-400 italic">No earnings found for this employee in this run.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</body>
</html>