@extends('garage.layouts.app')

@section('title', 'Payroll & Payslip')

@section('content')
@include('garage.hr.styles')

<div class="container-fluid px-3 py-3 hrx-page">
    <div class="hrx-head mb-3">
        <div>
            <div class="h4 mb-0 hrx-title">Payroll & Payslip</div>
            <div class="small hrx-sub">One payroll run per month. Open draft to refresh or edit selected employees before approval.</div>
        </div>
        <div class="d-flex gap-2 hrx-actions-bar">
            <form method="post" action="{{ route('garage.payroll.seed-ledgers') }}">
                @csrf
                <button class="btn btn-sm btn-outline-secondary" onclick="return confirm('Create HR ledgers (simple)?');">
                    <i class="bi bi-plus-circle me-1"></i>Setup HR ledgers
                </button>
            </form>
            <form id="payrollGenerateForm" method="post" action="{{ route('garage.payroll.generate') }}" class="d-flex gap-2 align-items-end">
                @csrf
                <div>
                    <label class="form-label small mb-1 hrx-sub">Month</label>
                    <input type="month" name="month" value="{{ $month }}" class="form-control form-control-sm">
                </div>
                <button class="btn btn-sm btn-primary" onclick="return confirm('Create payroll draft for this month? If a draft already exists, system will ask you to open it instead.');">
                    <i class="bi bi-eye me-1"></i>Prepare draft
                </button>
            </form>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success py-2 small">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger py-2 small">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger py-2 small">
            <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <div class="card hrx-card">
        <div class="table-responsive">
            <table class="table table-sm mb-0 hrx-table align-middle">
                <thead class="table-light">
                <tr>
                    <th>Month</th>
                    <th>Status</th>
                    <th class="text-end">Voucher</th>
                    <th class="text-end">Created</th>
                    <th class="text-end" style="width: 140px;">Action</th>
                </tr>
                </thead>
                <tbody>
                @forelse($runs as $r)
                    <tr>
                        <td class="fw-semibold">{{ $r->month }}</td>
                        <td>
                            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle text-capitalize">{{ $r->status }}</span>
                        </td>
                        <td class="text-end">
                            @if(!empty($r->garage_voucher_id))
                                <a class="btn btn-sm btn-outline-primary" href="{{ route('garage.vouchers.show', $r->garage_voucher_id) }}" target="_blank">View</a>
                            @else
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                        <td class="text-end small">{{ \Carbon\Carbon::parse($r->created_at)->format('Y-m-d H:i') }}</td>
                        <td class="text-end">
                            <a class="btn btn-sm btn-outline-primary" href="{{ route('garage.payroll.run.show', $r->id) }}">Open</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-muted p-3">No payroll runs yet.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-body py-2">{{ $runs->links() }}</div>
    </div>
</div>
@endsection