<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payroll Preparation - {{ $period->period_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">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#146CAA',
                        danger: '#D83B01',
                        gray50: '#FAF9F8',
                        gray100: '#F3F2F1',
                        gray200: '#EDEBE9',
                    }
                }
            }
        }
    </script>
    <style>
        .compact-table { border-collapse: separate; border-spacing: 0; width: 100%; }
        .compact-table th { 
            background-color: #F3F2F1; 
            color: #605E5C; 
            font-weight: 700; 
            font-size: 11px; 
            padding: 8px 12px; 
            border-bottom: 1px solid #EDEBE9; 
            text-align: left;
        }
        .compact-table td { 
            padding: 8px 12px; 
            border-bottom: 1px solid #EDEBE9; 
            font-size: 13px; 
            color: #323130; 
            vertical-align: middle;
        }
        .compact-table tr:hover { background-color: #FAF9F8; }
        .form-input { border: 1px solid #D1D1D1; border-radius: 4px; padding: 6px 12px; font-size: 13px; transition: border 0.2s; }
        .form-input:focus { border-color: #146CAA; outline: none; }
    </style>
</head>
<body class="bg-gray50 text-gray-800">
    @include('accounting.partials.sidebar')

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

        <main class="p-4">
            <form action="{{ route('admin.accounting.payroll.run.store') }}" method="POST">
                @csrf
                <input type="hidden" name="payroll_period_id" value="{{ $period->id }}">

                <div class="bg-white rounded-lg border border-gray-200 p-5 mb-4 shadow-sm">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="flex items-center space-x-4">
                            <div class="bg-primary/10 p-3 rounded-lg text-primary">
                                <i class="fas fa-calendar-alt text-xl"></i>
                            </div>
                            <div>
                                <label class="text-[10px] font-bold text-gray-400 uppercase">Selected Month</label>
                                <h1 class="text-base font-bold text-gray-900">{{ $period->period_name }}</h1>
                                <p class="text-[11px] text-gray-500 italic">{{ $period->start_date->format('d M') }} - {{ $period->end_date->format('d M, Y') }}</p>
                            </div>
                        </div>

                        <div class="md:col-span-2">
                            <label for="notes" class="text-[10px] font-bold text-gray-500 uppercase mb-1 block">Payroll Run Notes / Description</label>
                            <textarea id="notes" name="notes" rows="1" placeholder="Add a description for this payroll run (e.g., Head office salaries for March)..." 
                                      class="form-input w-full border-gray-300 focus:ring-1 focus:ring-primary h-10 resize-none"></textarea>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
                    <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm">
                        <p class="text-[10px] font-bold text-gray-500 uppercase">Total Employees</p>
                        <p class="text-lg font-bold text-gray-900">{{ $employees->count() }}</p>
                    </div>
                    <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm border-l-4 border-l-primary">
                        <p class="text-[10px] font-bold text-primary uppercase">Estimated Gross</p>
                        <p class="text-lg font-bold text-gray-900">ZMW {{ number_format($employees->sum('current_gross_pay'), 2) }}</p>
                    </div>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
                    <div class="p-4 border-b border-gray-100 flex justify-between items-center no-print">
                        <h2 class="text-sm font-bold text-gray-700">Employees List</h2>
                        <div class="relative">
                            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-[10px]"></i>
                            <input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Search NRC or Name..." class="form-input pl-8 py-1.5 text-xs w-64">
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="compact-table" id="payrollTable">
                            <thead>
                                <tr>
                                    <th>Employee Number</th>
                                    <th>Full Name</th>
                                    <th>NRC Number</th>
                                    <th>Gross Pay</th>
                                    <th class="text-center">Actions</th> </tr>
                            </thead>
                            <tbody>
                                @foreach($employees as $employee)
                                <tr>
                                    <td class="font-mono text-xs font-bold text-gray-500">#{{ $employee->employee_number }}</td>
                                    <td class="font-bold text-primary">{{ $employee->first_name }} {{ $employee->last_name }}</td>
                                    <td class="text-gray-600">
                                        {{ $employee->national_id ?? 'Not Provided' }}
                                    </td>
                                    <td class="font-mono font-bold text-gray-900">{{ number_format($employee->current_gross_pay, 2) }}</td>
                                    <td class="text-center"> <div class="flex items-center justify-center space-x-1">
                                          
                                            <button type="button" onclick="this.closest('tr').remove()" class="bg-gray-100 hover:bg-danger/10 text-gray-600 hover:text-danger px-3 py-1.5 rounded transition-colors" title="Remove Employee">
                                                <i class="fas fa-trash-alt text-xs"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="p-4 bg-gray-50 border-t border-gray-100 flex justify-end">
                        <button type="submit" class="bg-primary text-white px-6 py-2 rounded text-xs font-bold shadow-md hover:bg-blue-700 transition-all">
                            <i class="fas fa-plus-circle mr-2"></i> Create Payroll Run
                        </button>
                    </div>
                </div>
            </form>
        </main>
    </div>

    <script>
        function searchTable() {
            let input = document.getElementById("searchInput").value.toLowerCase();
            let rows = document.getElementById("payrollTable").getElementsByTagName("tbody")[0].rows;
            for (let row of rows) {
                row.style.display = row.innerText.toLowerCase().includes(input) ? "" : "none";
            }
        }
    </script>
</body>
</html>