@extends('app-new')

@push('content-header')
<div class="row breadcrumbs-top">
    <div class="col-12">
        <h2 class="content-header-title float-start mb-0">PF Report</h2>
        <div class="breadcrumb-wrapper">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('') }}/{{ $alias }}/home">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ url('') }}/{{ $alias }}/pf-reports">PF Report</a></li>
                <li class="breadcrumb-item active">View</li>
            </ol>
        </div>
    </div>
</div>
@endpush

@section('content')
@php
$months = [
    '01'=>'January','02'=>'February','03'=>'March','04'=>'April',
    '05'=>'May','06'=>'June','07'=>'July','08'=>'August',
    '09'=>'September','10'=>'October','11'=>'November','12'=>'December',
];
$periodLabel = ($months[$month] ?? $month) . ' ' . $year;
$offset = ($data->currentPage() - 1) * $data->perPage();
@endphp

<div class="card">

    {{-- Actions bar --}}
    <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-1 py-1">

        {{-- Search --}}
        <form method="get" action="" class="d-flex align-items-center gap-50 mb-0">
            <input type="hidden" name="month" value="{{ $month }}">
            <input type="hidden" name="year" value="{{ $year }}">
            <div class="input-group input-group-sm" style="width:260px">
                <input type="text" name="search" class="form-control"
                       placeholder="Name or employee code…"
                       value="{{ request('search') }}">
                <button type="submit" class="btn btn-primary btn-sm px-1">
                    <i data-feather="search" style="width:14px;height:14px"></i>
                </button>
                @if(request('search'))
                <a href="?month={{ $month }}&year={{ $year }}" class="btn btn-outline-secondary btn-sm px-1" title="Clear">
                    <i data-feather="x" style="width:14px;height:14px"></i>
                </a>
                @endif
            </div>
        </form>

        {{-- Download + Back --}}
        <div class="d-flex align-items-center gap-1 flex-wrap">
            <a href="{{ url('') }}/{{ $alias }}/pfreport-download?month={{ $month }}&year={{ $year }}&search={{ request('search') }}&format=txt"
               class="btn btn-outline-secondary btn-sm">
                <i data-feather="download" class="font-small-3 me-25"></i> TXT (ECR)
            </a>
            <a href="{{ url('') }}/{{ $alias }}/pfreport-download?month={{ $month }}&year={{ $year }}&search={{ request('search') }}&format=excel"
               class="btn btn-outline-success btn-sm">
                <i data-feather="grid" class="font-small-3 me-25"></i> Excel
            </a>
            <a href="{{ url('') }}/{{ $alias }}/pf-reports" class="btn btn-outline-primary btn-sm">
                <i data-feather="arrow-left" class="font-small-3 me-25"></i> Back
            </a>
        </div>

    </div>

    {{-- Table --}}
    <div class="table-responsive">
        <table class="table table-hover table-bordered align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th class="text-center" style="width:42px">#</th>
                    <th class="text-nowrap">UAN No</th>
                    <th class="text-nowrap">Member Name</th>
                    <th class="text-end text-nowrap">Gross Wages</th>
                    <th class="text-end text-nowrap">Basic Salary</th>
                    <th class="text-end text-nowrap">EPF Wages</th>
                    <th class="text-end text-nowrap">EPS Wages</th>
                    <th class="text-end text-nowrap">EPF Contri</th>
                    <th class="text-end text-nowrap">EPS Contri</th>
                    <th class="text-end text-nowrap">EPF–EPS Diff</th>
                    <th class="text-center text-nowrap">NCP Days</th>
                    <th class="text-center text-nowrap">LOP Days</th>
                </tr>
            </thead>
            <tbody>
                @forelse($data as $i => $row)
                <tr>
                    <td class="text-center text-muted small">{{ $offset + $loop->iteration }}</td>
                    <td class="text-nowrap fw-semibold">{{ $row['uan_no'] }}</td>
                    <td class="text-nowrap">{{ $row['emp_name'] }}</td>
                    <td class="text-end">{{ number_format($row['gross_wages'], 2) }}</td>
                    <td class="text-end">{{ number_format($row['basic_salary'], 2) }}</td>
                    <td class="text-end">{{ number_format($row['pf_wage'], 2) }}</td>
                    <td class="text-end">{{ number_format($row['epf_wage'], 2) }}</td>
                    <td class="text-end text-success fw-semibold">{{ number_format($row['employee_pf'], 2) }}</td>
                    <td class="text-end">{{ number_format($row['employer_eps'], 2) }}</td>
                    <td class="text-end">{{ number_format($row['employer_epf'], 2) }}</td>
                    <td class="text-center">{{ $row['absent_days'] }}</td>
                    <td class="text-center">{{ $row['lop_days'] }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="12" class="text-center text-muted py-4">
                        <i data-feather="inbox" style="width:32px;height:32px" class="mb-50 d-block mx-auto"></i>
                        No PF-applicable employees found for <strong>{{ $periodLabel }}</strong>.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Footer: info + pagination --}}
    @if($data->total() > 0)
    <div class="card-footer d-flex flex-wrap align-items-center justify-content-between gap-1 py-1">
        <small class="text-muted">
            Showing {{ $data->firstItem() }} to {{ $data->lastItem() }} of {{ $data->total() }} employees
        </small>
        <div>
            {{ $data->links('pagination::bootstrap-5') }}
        </div>
    </div>
    @endif

</div>
@endsection

@push('footer-script')
<script>
    feather.replace();
</script>
@endpush