@extends('layouts.app')
@section('title', 'Payroll Run — ' . $run->run_number)
@section('styles')
<style>
.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}
.tot-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px}
.tot-card .label{font-size:10px;color:#6b7280;text-transform:uppercase;font-weight:600}
.tot-card .value{font-size:14px;font-weight:700;color:#111827;margin-top:2px}

/* Tab strip — larger labels, proper spacing, clearer active state */
.ltab-strip{display:flex;flex-wrap:wrap;gap:0;padding:0 8px}
.ltab{
    background:transparent;
    border:none;
    border-bottom:2px solid transparent;
    padding:14px 18px;
    font-size:13px;
    font-weight:500;
    color:#6b7280;
    cursor:pointer;
    transition:color .12s, border-color .12s, background .12s;
    white-space:nowrap;
    line-height:1.4;
    margin-bottom:-1px; /* overlap the container's bottom border so active underline aligns */
}
.ltab:hover{color:#111827;background:#f9fafb}
.ltab.active{color:#5c1269;border-bottom-color:#5c1269;font-weight:600}
.ltab .count{
    display:inline-block;
    margin-left:6px;
    padding:1px 7px;
    background:#f3f4f6;
    color:#6b7280;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    line-height:1.4;
}
.ltab.active .count{background:#f3e8ff;color:#5c1269}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:none;align-items:center;justify-content:center}
.modal-bg.show{display:flex}
.modal-box{background:#fff;border-radius:12px;padding:20px;max-width:480px;width:90%;max-height:90vh;overflow-y:auto}
</style>
@endsection
@section('content')

<div class="mb-3"><a href="{{ route('payroll.index') }}" class="text-xs text-gray-500 hover:underline">← Back to Payroll</a></div>

{{-- Header --}}
<div class="bg-white rounded-xl border p-4 mb-4">
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <h2 class="text-lg font-bold">{{ $run->run_number }}</h2>
                <span class="status-pill status-{{ $run->status }}">{{ $run->status }}</span>
                @if($run->is_revision)<span class="badge badge-warning text-xs">Revision</span>@endif
            </div>
            <p class="text-sm text-gray-500">{{ $run->month_label }} · {{ $run->employee_count }} employees · prepared by {{ $run->preparedBy->name ?? '-' }} on {{ $run->created_at->format('d M Y H:i') }}</p>
            @if($run->reversed_at)
            <p class="text-xs text-red-600 mt-1">⟲ Reversed by {{ $run->reversedBy->name ?? '-' }} on {{ $run->reversed_at->format('d M Y H:i') }} — {{ $run->reversal_reason }}</p>
            @endif
        </div>
        <div class="flex flex-wrap gap-2">
            @if($run->status === 'draft')
                <form method="POST" action="{{ route('payroll.run.review', $run->id) }}" class="inline">@csrf @method('PUT')
                    <button class="btn-secondary text-xs">Mark as Reviewed</button>
                </form>
                <form method="POST" action="{{ route('payroll.run.approve', $run->id) }}" class="inline" onsubmit="return confirm('Approve this payroll? This will post journal entries to finance.')">@csrf @method('PUT')
                    <button class="btn-success text-xs">Approve</button>
                </form>
                <form method="POST" action="{{ route('payroll.run.delete', $run->id) }}" class="inline" onsubmit="return confirm('Delete this draft run? This cannot be undone.')">@csrf @method('DELETE')
                    <button class="btn-danger text-xs">Delete Draft</button>
                </form>
            @elseif($run->status === 'reviewed')
                <form method="POST" action="{{ route('payroll.run.approve', $run->id) }}" class="inline" onsubmit="return confirm('Approve this payroll? This will post journal entries to finance.')">@csrf @method('PUT')
                    <button class="btn-success text-xs">Approve</button>
                </form>
            @elseif($run->status === 'approved')
                <form method="POST" action="{{ route('payroll.run.paid', $run->id) }}" class="inline" onsubmit="return confirm('Mark all employee lines as paid?')">@csrf @method('PUT')
                    <button class="btn-success text-xs">Mark as Paid</button>
                </form>
                <form method="POST" action="{{ route('payroll.run.lock', $run->id) }}" class="inline" onsubmit="return confirm('Lock this payroll? No further edits without admin reversal.')">@csrf @method('PUT')
                    <button class="btn-primary text-xs">Lock</button>
                </form>
                <button onclick="document.getElementById('reverse-modal').classList.add('show')" class="btn-danger text-xs">Reverse</button>
            @elseif($run->status === 'paid')
                <form method="POST" action="{{ route('payroll.run.lock', $run->id) }}" class="inline" onsubmit="return confirm('Lock this payroll? No further edits without admin reversal.')">@csrf @method('PUT')
                    <button class="btn-primary text-xs">Lock</button>
                </form>
                <button onclick="document.getElementById('reverse-modal').classList.add('show')" class="btn-danger text-xs">Reverse</button>
            @elseif($run->status === 'locked')
                <button onclick="document.getElementById('reverse-modal').classList.add('show')" class="btn-danger text-xs">Reverse (Admin)</button>
            @endif
        </div>
    </div>
</div>

{{-- Totals Strip --}}
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2 mb-4">
    <div class="tot-card"><p class="label">Gross</p><p class="value">{{ number_format($run->total_gross) }}</p></div>
    <div class="tot-card"><p class="label">Taxable</p><p class="value">{{ number_format($run->total_taxable) }}</p></div>
    <div class="tot-card"><p class="label">PAYE</p><p class="value">{{ number_format($run->total_paye) }}</p></div>
    <div class="tot-card"><p class="label">SHIF</p><p class="value">{{ number_format($run->total_shif) }}</p></div>
    <div class="tot-card"><p class="label">NSSF (E+E)</p><p class="value">{{ number_format($run->total_nssf_employee + $run->total_nssf_employer) }}</p></div>
    <div class="tot-card"><p class="label">AHL (E+E)</p><p class="value">{{ number_format($run->total_ahl_employee + $run->total_ahl_employer) }}</p></div>
    <div class="tot-card" style="border-left:3px solid #16a34a"><p class="label">Net Pay</p><p class="value text-green-700">{{ number_format($run->total_net) }}</p></div>
</div>

{{-- Tabs --}}
<div class="bg-white rounded-xl border overflow-hidden mb-4">
    <div class="border-b ltab-strip">
        <button class="ltab active" data-tab="lines" onclick="showTab(this,'lines')">Employee Lines<span class="count">{{ $run->items->count() }}</span></button>
        <button class="ltab" data-tab="remits" onclick="showTab(this,'remits')">Remittances<span class="count">{{ $run->remittances->count() }}</span></button>
        <button class="ltab" data-tab="journal" onclick="showTab(this,'journal')">Journal Entries</button>
        <button class="ltab" data-tab="audit" onclick="showTab(this,'audit')">Audit Trail<span class="count">{{ $run->auditLogs->count() }}</span></button>
    </div>

    {{-- LINES TAB --}}
    <div class="ltab-panel active" id="tab-lines">
        <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead class="bg-gray-50">
                <tr>
                    <th class="table-header">Emp No.</th>
                    <th class="table-header">Name</th>
                    <th class="table-header">Dept</th>
                    <th class="table-header text-right">Basic</th>
                    <th class="table-header text-right">Allowances</th>
                    <th class="table-header text-right">OT/Bonus</th>
                    <th class="table-header text-right">Gross</th>
                    <th class="table-header text-right">PAYE</th>
                    <th class="table-header text-right">SHIF</th>
                    <th class="table-header text-right">NSSF</th>
                    <th class="table-header text-right">AHL</th>
                    <th class="table-header text-right">Other</th>
                    <th class="table-header text-right">Net</th>
                    <th class="table-header"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
            @foreach($run->items->sortBy('full_name') as $item)
                <tr class="hover:bg-purple-50/20">
                    <td class="table-cell">{{ $item->employee_number }}</td>
                    <td class="table-cell font-medium">{{ $item->full_name }}</td>
                    <td class="table-cell text-gray-500">{{ $item->department ?? '-' }}</td>
                    <td class="table-cell text-right">{{ number_format($item->basic_salary) }}</td>
                    <td class="table-cell text-right text-gray-500">{{ number_format($item->taxable_allowances + $item->non_taxable_allowances + $item->benefits_in_kind) }}</td>
                    <td class="table-cell text-right text-gray-500">{{ number_format($item->overtime + $item->bonus) }}</td>
                    <td class="table-cell text-right font-semibold">{{ number_format($item->gross_pay) }}</td>
                    <td class="table-cell text-right">{{ number_format($item->paye) }}</td>
                    <td class="table-cell text-right">{{ number_format($item->shif) }}</td>
                    <td class="table-cell text-right">{{ number_format($item->nssf_employee) }}</td>
                    <td class="table-cell text-right">{{ number_format($item->ahl_employee) }}</td>
                    <td class="table-cell text-right">{{ number_format($item->other_deductions) }}</td>
                    <td class="table-cell text-right font-bold text-green-700">{{ number_format($item->net_pay) }}</td>
                    <td class="table-cell">
                        <div class="flex gap-1">
                            @if($run->isEditable())
                            <button onclick="openEdit({{ $item->id }}, '{{ addslashes($item->full_name) }}', {{ $item->overtime }}, {{ $item->bonus }})" class="text-xs" style="color:#5c1269">Edit</button>
                            <span class="text-gray-300">|</span>
                            @endif
                            <a href="{{ route('payroll.payslip', $item->id) }}" target="_blank" class="text-xs text-blue-600">Slip</a>
                        </div>
                    </td>
                </tr>
                @if($item->deductions->count())
                <tr class="bg-amber-50/30">
                    <td colspan="14" class="px-4 py-1 text-xs">
                        <span class="text-gray-500">Other deductions:</span>
                        @foreach($item->deductions as $d)
                            <span class="inline-block ml-2 badge badge-warning text-xs">{{ $d->label }}: {{ number_format($d->amount, 2) }}
                                @if($run->isEditable())
                                <form method="POST" action="{{ route('payroll.deduction.delete', $d->id) }}" class="inline" onsubmit="return confirm('Remove this deduction?')">@csrf @method('DELETE')<button class="text-red-600 ml-1">×</button></form>
                                @endif
                            </span>
                        @endforeach
                    </td>
                </tr>
                @endif
            @endforeach
            </tbody>
        </table>
        </div>
    </div>

    {{-- REMITTANCES TAB --}}
    <div class="ltab-panel" id="tab-remits" style="display:none">
        <table class="w-full text-xs">
            <thead class="bg-gray-50"><tr>
                <th class="table-header">Statutory Body</th>
                <th class="table-header text-right">Amount Due</th>
                <th class="table-header">Due Date</th>
                <th class="table-header">Status</th>
                <th class="table-header">Reference</th>
                <th class="table-header"></th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
            @forelse($run->remittances as $r)
                <tr>
                    <td class="table-cell font-medium">{{ $r->label }}</td>
                    <td class="table-cell text-right font-semibold">{{ number_format($r->amount_due, 2) }}</td>
                    <td class="table-cell">{{ $r->due_date?->format('d M Y') }}</td>
                    <td class="table-cell">
                        @if($r->status === 'paid')<span class="badge badge-success">Paid</span>
                        @elseif($r->due_date && $r->due_date->isPast())<span class="badge badge-danger">Overdue</span>
                        @else<span class="badge badge-warning">Unpaid</span>@endif
                        @if($r->is_late)<span class="badge badge-danger ml-1">Late</span>@endif
                    </td>
                    <td class="table-cell text-gray-500">{{ $r->payment_reference ?? '-' }}</td>
                    <td class="table-cell">
                        @if($r->status !== 'paid')
                        <a href="{{ route('payroll.remittances') }}" class="text-xs" style="color:#5c1269">Mark Paid →</a>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" class="table-cell text-center text-gray-400 py-8">No remittances generated.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    {{-- JOURNAL TAB --}}
    <div class="ltab-panel" id="tab-journal" style="display:none">
        <div class="p-5">
            @if(!$run->journal_posted)
            <div class="bg-amber-50 border border-amber-200 rounded p-3 text-xs text-amber-800">
                Journal entries will be posted automatically when this run is approved.
            </div>
            @else
            <p class="text-xs text-gray-500 mb-3">Posted on {{ $run->journal_posted_at?->format('d M Y H:i') }}</p>
            <table class="w-full text-xs">
                <thead class="bg-gray-50"><tr>
                    <th class="table-header">Account</th>
                    <th class="table-header text-right">Debit</th>
                    <th class="table-header text-right">Credit</th>
                </tr></thead>
                <tbody class="divide-y divide-gray-50">
                    <tr><td class="table-cell">Salary Expense</td><td class="table-cell text-right">{{ number_format($run->total_gross, 2) }}</td><td class="table-cell"></td></tr>
                    <tr><td class="table-cell">Employer NSSF Expense</td><td class="table-cell text-right">{{ number_format($run->total_nssf_employer, 2) }}</td><td class="table-cell"></td></tr>
                    <tr><td class="table-cell">Employer AHL Expense</td><td class="table-cell text-right">{{ number_format($run->total_ahl_employer, 2) }}</td><td class="table-cell"></td></tr>
                    <tr><td class="table-cell">PAYE Payable</td><td class="table-cell"></td><td class="table-cell text-right">{{ number_format($run->total_paye, 2) }}</td></tr>
                    <tr><td class="table-cell">SHIF Payable</td><td class="table-cell"></td><td class="table-cell text-right">{{ number_format($run->total_shif, 2) }}</td></tr>
                    <tr><td class="table-cell">NSSF Payable</td><td class="table-cell"></td><td class="table-cell text-right">{{ number_format($run->total_nssf_employee + $run->total_nssf_employer, 2) }}</td></tr>
                    <tr><td class="table-cell">AHL Payable</td><td class="table-cell"></td><td class="table-cell text-right">{{ number_format($run->total_ahl_employee + $run->total_ahl_employer, 2) }}</td></tr>
                    <tr><td class="table-cell">Other Deductions Payable</td><td class="table-cell"></td><td class="table-cell text-right">{{ number_format($run->total_other_deductions, 2) }}</td></tr>
                    <tr><td class="table-cell">Net Salary Payable</td><td class="table-cell"></td><td class="table-cell text-right">{{ number_format($run->total_net, 2) }}</td></tr>
                </tbody>
                <tfoot class="bg-gray-50 font-bold">
                    <tr><td class="table-cell">Total</td>
                        <td class="table-cell text-right">{{ number_format($run->total_gross + $run->total_nssf_employer + $run->total_ahl_employer, 2) }}</td>
                        <td class="table-cell text-right">{{ number_format($run->total_paye + $run->total_shif + $run->total_nssf_employee + $run->total_nssf_employer + $run->total_ahl_employee + $run->total_ahl_employer + $run->total_other_deductions + $run->total_net, 2) }}</td>
                    </tr>
                </tfoot>
            </table>
            @endif
        </div>
    </div>

    {{-- AUDIT TAB --}}
    <div class="ltab-panel" id="tab-audit" style="display:none">
        <table class="w-full text-xs">
            <thead class="bg-gray-50"><tr>
                <th class="table-header">When</th>
                <th class="table-header">Who</th>
                <th class="table-header">Action</th>
                <th class="table-header">Description</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($run->auditLogs->sortByDesc('created_at') as $a)
                <tr>
                    <td class="table-cell text-gray-500">{{ $a->created_at->format('d M H:i') }}</td>
                    <td class="table-cell">{{ $a->user_name ?? $a->user->name ?? 'System' }}</td>
                    <td class="table-cell"><span class="badge badge-info">{{ $a->action }}</span></td>
                    <td class="table-cell">{{ $a->description }}</td>
                </tr>
                @empty
                <tr><td colspan="4" class="table-cell text-center text-gray-400 py-6">No audit entries yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Reverse Modal --}}
<div class="modal-bg" id="reverse-modal">
    <div class="modal-box">
        <h3 class="text-base font-bold mb-2">Reverse Payroll Run</h3>
        <p class="text-xs text-gray-500 mb-3">This will return the run to draft status. Reason is required and will be logged.</p>
        <form method="POST" action="{{ route('payroll.run.reverse', $run->id) }}">@csrf @method('PUT')
            <label class="form-label">Reason for Reversal *</label>
            <textarea name="reversal_reason" class="form-input" rows="3" minlength="10" required></textarea>
            <div class="flex justify-end gap-2 mt-4">
                <button type="button" onclick="document.getElementById('reverse-modal').classList.remove('show')" class="btn-secondary">Cancel</button>
                <button type="submit" class="btn-danger">Reverse Run</button>
            </div>
        </form>
    </div>
</div>

{{-- Edit Line Modal --}}
<div class="modal-bg" id="edit-modal">
    <div class="modal-box">
        <h3 class="text-base font-bold mb-1">Edit Line</h3>
        <p class="text-xs text-gray-500 mb-3" id="edit-name"></p>
        <form method="POST" id="edit-form">@csrf @method('PUT')
            <div class="grid grid-cols-2 gap-3 mb-3">
                <div>
                    <label class="form-label">Overtime</label>
                    <input type="number" step="0.01" min="0" name="overtime" id="edit-overtime" class="form-input">
                </div>
                <div>
                    <label class="form-label">Bonus</label>
                    <input type="number" step="0.01" min="0" name="bonus" id="edit-bonus" class="form-input">
                </div>
            </div>
            <label class="form-label">Remarks</label>
            <input type="text" name="remarks" class="form-input mb-4">

            <hr class="my-3">
            <h4 class="text-xs font-bold uppercase text-gray-600 mb-2">Add Other Deduction</h4>
        </form>
        <form method="POST" id="ded-form">@csrf
            <div class="grid grid-cols-2 gap-2 mb-2">
                <select name="deduction_type" class="form-input">
                    @foreach(\App\Models\PayrollItemDeduction::TYPES as $k => $v)
                    <option value="{{ $k }}">{{ $v }}</option>
                    @endforeach
                </select>
                <input type="number" step="0.01" min="0.01" name="amount" class="form-input" placeholder="Amount" required>
            </div>
            <input type="text" name="label" class="form-input mb-2" placeholder="Label (optional)">
            <input type="text" name="reason" class="form-input mb-2" placeholder="Reason (optional)">
            <button type="submit" class="btn-secondary text-xs w-full">+ Add Deduction</button>
        </form>

        <div class="flex justify-end gap-2 mt-4 pt-3 border-t">
            <button type="button" onclick="document.getElementById('edit-modal').classList.remove('show')" class="btn-secondary">Close</button>
            <button type="button" onclick="document.getElementById('edit-form').submit()" class="btn-primary">Save Line</button>
        </div>
    </div>
</div>

<script>
function showTab(btn, tab) {
    document.querySelectorAll('.ltab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.ltab-panel').forEach(p => { p.style.display = 'none'; p.classList.remove('active'); });
    btn.classList.add('active');
    const panel = document.getElementById('tab-' + tab);
    panel.style.display = 'block';
    panel.classList.add('active');
}

function openEdit(itemId, name, overtime, bonus) {
    document.getElementById('edit-name').textContent = name;
    document.getElementById('edit-overtime').value = overtime;
    document.getElementById('edit-bonus').value = bonus;
    document.getElementById('edit-form').action = '/payroll/item/' + itemId;
    document.getElementById('ded-form').action = '/payroll/item/' + itemId + '/deduction';
    document.getElementById('edit-modal').classList.add('show');
}

// Close modals on backdrop click
document.querySelectorAll('.modal-bg').forEach(m => {
    m.addEventListener('click', e => { if (e.target === m) m.classList.remove('show'); });
});
</script>
@endsection