@extends('layouts.app')
@section('title', 'Staff Payroll')
@section('styles')
<style>
.pr-tab{padding:10px 20px;font-size:13px;font-weight:600;color:#6b7280;border-radius:10px;cursor:pointer;transition:all .15s;border:2px solid #e5e7eb;background:#fff;display:flex;align-items:center;gap:8px}
.pr-tab:hover{border-color:#5c1269;color:#5c1269;background:#f9f0fc}
.pr-tab.active{border-color:#5c1269;color:#fff;background:#5c1269}
.pr-panel{display:none}.pr-panel.active{display:block}
.kpi-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px}
.kpi-card .label{font-size:11px;color:#6b7280;text-transform:uppercase;font-weight:600;letter-spacing:.04em}
.kpi-card .value{font-size:18px;font-weight:700;color:#111827;margin-top:4px}
.status-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.status-draft{background:#f3f4f6;color:#4b5563}
.status-reviewed{background:#dbeafe;color:#1e40af}
.status-approved{background:#dcfce7;color:#166534}
.status-paid{background:#e0e7ff;color:#3730a3}
.status-locked{background:#1f2937;color:#fff}
</style>
@endsection
@section('content')
@include('hr.partials.ft-staff-tabs', ['active' => 'payroll-runs'])

{{-- Action Tabs (2) --}}
<div class="flex flex-wrap gap-3 mb-4">
    <button class="pr-tab {{ $panel==='payroll' ? 'active' : '' }}" onclick="switchPanel('payroll')">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
        Payroll
    </button>
    <button class="pr-tab {{ $panel==='staff' ? 'active' : '' }}" onclick="switchPanel('staff')">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
        Staff Payroll Profiles
    </button>
    <a href="{{ route('payroll.remittances') }}" class="pr-tab" style="text-decoration:none">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
        Statutory Remittances
    </a>
</div>

{{-- ═══════════ PAYROLL TAB (Overview + Runs + Generate merged) ═══════════ --}}
<div class="pr-panel {{ $panel==='payroll' ? 'active' : '' }}" id="panel-payroll">

    {{-- Generate New Run — full width. Outstanding Remittances tile
         removed; the same data is one click away on the Statutory
         Remittances tab. --}}
    <div class="bg-white rounded-xl border p-5 mb-4">
        <h4 class="text-sm font-bold text-gray-700 uppercase mb-3">Generate Monthly Payroll</h4>
        <form method="POST" action="{{ route('payroll.generate') }}">@csrf
            <div class="grid grid-cols-3 gap-3 mb-3 items-end">
                <div>
                    <label class="form-label">Payroll Month *</label>
                    <input type="month" name="payroll_month" class="form-input text-xs" value="{{ now()->format('Y-m') }}" required>
                </div>
                <div>
                    <label class="flex items-center gap-2 text-xs text-gray-700 mt-5">
                        <input type="checkbox" name="is_revision" value="1" class="rounded">
                        <span>Revision</span>
                    </label>
                </div>
                <div>
                    <button type="submit" class="btn-primary text-xs w-full">Generate Draft</button>
                </div>
            </div>
            <div>
                <label class="form-label">Notes (optional)</label>
                <textarea name="notes" class="form-input text-xs" rows="2" placeholder="e.g. Includes February allowance adjustments"></textarea>
            </div>
        </form>
    </div>

    {{-- All Runs Table --}}
    <div class="bg-white rounded-xl border overflow-hidden">
        <div class="px-5 py-3 border-b bg-gray-50 flex justify-between items-center">
            <h3 class="text-sm font-bold text-gray-700 uppercase">Payroll Runs</h3>
            <span class="badge badge-info">{{ $runs->count() }} run(s)</span>
        </div>
        <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50"><tr>
                <th class="table-header">Run No.</th>
                <th class="table-header">Month</th>
                <th class="table-header">Status</th>
                <th class="table-header text-center">Staff</th>
                <th class="table-header text-right">Gross</th>
                <th class="table-header text-right">PAYE</th>
                <th class="table-header text-right">Net</th>
                <th class="table-header text-right">Employer Cost</th>
                <th class="table-header">Prepared By</th>
                <th class="table-header"></th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
            @forelse($runs as $r)
                <tr class="hover:bg-purple-50/20">
                    <td class="table-cell font-semibold">{{ $r->run_number }}</td>
                    <td class="table-cell text-xs">{{ $r->month_label }}@if($r->is_revision) <span class="badge badge-warning text-xs">Revision</span>@endif</td>
                    <td class="table-cell"><span class="status-pill status-{{ $r->status }}">{{ $r->status }}</span></td>
                    <td class="table-cell text-center">{{ $r->employee_count }}</td>
                    <td class="table-cell text-right text-xs">{{ number_format($r->total_gross) }}</td>
                    <td class="table-cell text-right text-xs">{{ number_format($r->total_paye) }}</td>
                    <td class="table-cell text-right text-xs font-semibold">{{ number_format($r->total_net) }}</td>
                    <td class="table-cell text-right text-xs" style="color:#5c1269">{{ number_format($r->total_employer_cost) }}</td>
                    <td class="table-cell text-xs">{{ $r->preparedBy->name ?? '-' }}</td>
                    <td class="table-cell"><a href="{{ route('payroll.run.show', $r->id) }}" class="text-xs font-medium" style="color:#5c1269">View →</a></td>
                </tr>
            @empty
                <tr><td colspan="10" class="table-cell text-center text-gray-400 py-12">No payroll runs yet. Use the form above to generate the first one.</td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
    </div>
</div>

{{-- ═══════════ STAFF PAYROLL PROFILES TAB ═══════════ --}}
<div class="pr-panel {{ $panel==='staff' ? 'active' : '' }}" id="panel-staff">
    <div class="bg-white rounded-xl border overflow-hidden">
        <div class="px-5 py-3 border-b bg-gray-50 flex justify-between items-center">
            <h3 class="text-sm font-bold text-gray-700 uppercase">Staff Payroll Profiles</h3>
            <input type="text" id="staff-filter" class="form-input text-xs w-64" placeholder="Filter by name or employee no...">
        </div>
        <div class="overflow-x-auto">
        <table class="w-full" id="staff-table">
            <thead class="bg-gray-50"><tr>
                <th class="table-header">Employee No.</th>
                <th class="table-header">Name</th>
                <th class="table-header">Department</th>
                <th class="table-header">Designation</th>
                <th class="table-header text-right">Basic Salary</th>
                <th class="table-header text-center">Status</th>
                <th class="table-header"></th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
            @foreach(\App\Models\StaffRecord::with('department')->where('status','active')->orderBy('first_name')->get() as $s)
                @php $errs = \App\Services\PayrollCalculator::validateStaff($s); @endphp
                <tr class="hover:bg-purple-50/20">
                    <td class="table-cell font-semibold text-xs">{{ $s->employee_number }}</td>
                    <td class="table-cell text-sm">{{ $s->full_name }}</td>
                    <td class="table-cell text-xs">{{ $s->department->name ?? '-' }}</td>
                    <td class="table-cell text-xs">{{ $s->designation ?? '-' }}</td>
                    <td class="table-cell text-right text-xs">{{ number_format($s->salary) }}</td>
                    <td class="table-cell text-center">
                        @if(empty($errs))
                            <span class="badge badge-success text-xs">Payable</span>
                        @else
                            <span class="badge badge-danger text-xs" title="{{ implode(', ', $errs) }}">Blocked</span>
                        @endif
                    </td>
                    <td class="table-cell">
                        <a href="{{ route('hr.staff.show', $s->id) }}" class="text-xs font-medium text-gray-600 hover:underline mr-3" title="View full HR profile (read-only)">View Profile</a>
                        <a href="{{ route('payroll.staff.profile', $s->id) }}" class="text-xs font-medium" style="color:#5c1269">Edit Profile →</a>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
        </div>
    </div>
</div>

<script>
function switchPanel(panel){
    document.querySelectorAll('.pr-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.pr-panel').forEach(p => p.classList.remove('active'));
    const btn = document.querySelector(`.pr-tab[onclick*="${panel}"]`);
    if (btn) btn.classList.add('active');
    document.getElementById('panel-' + panel).classList.add('active');
    const url = new URL(window.location);
    url.searchParams.set('panel', panel);
    window.history.replaceState({}, '', url);
}

document.getElementById('staff-filter')?.addEventListener('input', function(e){
    const q = e.target.value.toLowerCase();
    document.querySelectorAll('#staff-table tbody tr').forEach(row => {
        row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
});

// Default to payroll tab if none specified
if (!document.querySelector('.pr-panel.active')) {
    document.getElementById('panel-payroll').classList.add('active');
    document.querySelector('.pr-tab[onclick*="payroll"]').classList.add('active');
}
</script>
@endsection