@extends('layouts.app')

@section('title', 'My Payslips')

@section('content')
<div class="mb-4">
    <h4 class="fw-bold mb-1">My Salary Payslips</h4>
    <p class="text-secondary small mb-0">Confidential monthly compensation records, allowances and deductions</p>
</div>

<div class="card shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 small">
            <thead class="table-light text-secondary">
                <tr>
                    <th>Payroll Cycle</th>
                    <th>Payment Date</th>
                    <th>Basic Salary</th>
                    <th>Allowances</th>
                    <th>Overtime Pay</th>
                    <th>Deductions</th>
                    <th>Net Salary (BDT)</th>
                    <th class="text-end">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($myPayslips as $item)
                    <tr>
                        <td class="fw-bold text-dark">
                            <i class="bi bi-calendar2-check text-primary me-1"></i> {{ $item->payrollPeriod->name ?? 'Salary' }}
                        </td>
                        <td>{{ $item->payrollPeriod ? $item->payrollPeriod->payment_date->format('d M Y') : '--' }}</td>
                        <td>৳ {{ number_format($item->basic_salary, 2) }}</td>
                        <td>৳ {{ number_format($item->house_rent + $item->medical + $item->conveyance, 2) }}</td>
                        <td>৳ {{ number_format($item->overtime_pay, 2) }}</td>
                        <td class="text-danger">৳ {{ number_format($item->deductions, 2) }}</td>
                        <td class="fw-bold text-success fs-6">৳ {{ number_format($item->net_salary, 2) }}</td>
                        <td class="text-end">
                            <a href="{{ route('payroll.payslip', $item->id) }}" class="btn btn-sm btn-outline-primary py-1 px-3" target="_blank">
                                <i class="bi bi-printer me-1"></i> View / Print
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5 text-muted">
                            <i class="bi bi-file-earmark-lock2 fs-2 d-block mb-2"></i>
                            No payslips issued yet.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection