@extends('app-new')

@push('head-script')
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.min.css">
@endpush

@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 active">PF Report</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',
];
$currentYear = (int) date('Y');
$periodLabel = ($months[$month] ?? $month) . ' ' . $year;
$offset      = ($data->currentPage() - 1) * $data->perPage();

// Count active filters (excluding month/year which are always set)
$activeFilters = collect([
    request('employee_id'), request('department_id'), request('sub_department_id'),
    request('designation_id'), request('location_id'), request('sublocation_id'),
    request('contractor_id'), request('category_id'), request('work_station_id'),
    request('shift_id'), request('employee_type'), request('employee_status'),
])->filter(fn($v) => !empty($v))->count();
@endphp

@if (isset($status))
    @foreach ($status['messages'] as $m)
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>{{ $m }}</strong>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endforeach
@endif

<div class="card">

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

        <div class="d-flex align-items-center gap-75">
            <span class="text-muted small">{{ $periodLabel }}</span>
            @if($activeFilters > 0)
            <a href="?month={{ $month }}&year={{ $year }}"
               class="badge bg-light-danger text-danger border-0 text-decoration-none" title="Clear filters">
                {{ $activeFilters }} filter{{ $activeFilters > 1 ? 's' : '' }} active &times;
            </a>
            @endif
        </div>

        <div class="d-flex align-items-center gap-1">
            <a href="{{ url('') }}/{{ $alias }}/pfreport-download?month={{ $month }}&year={{ $year }}&{{ http_build_query(request()->except(['month','year','page'])) }}&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 }}&{{ http_build_query(request()->except(['month','year','page'])) }}&format=excel"
               class="btn btn-outline-success btn-sm">
                <i data-feather="grid" class="font-small-3 me-25"></i> Excel
            </a>
            <button class="btn btn-outline-primary btn-sm" type="button"
                    data-bs-toggle="offcanvas" data-bs-target="#pfFilterCanvas">
                <i data-feather="sliders" class="font-small-3 me-25"></i> Filters
                @if($activeFilters > 0)
                <span class="badge bg-primary rounded-pill ms-25">{{ $activeFilters }}</span>
                @endif
            </button>
        </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">Employee Name</th>
                    <th class="text-nowrap">Category</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">EDLI Wages</th>
                    <th class="text-end text-nowrap">EPF Contri</th>
                    <th class="text-end text-nowrap">VPF Contri</th>
                    <th class="text-end text-nowrap">EPS Contri</th>
                    <th class="text-end text-nowrap">EPF–EPS Diff</th>
                    <th class="text-end text-nowrap">PF Admin Charges</th>
                    <th class="text-end text-nowrap">EDLI Charges</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 $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'] }}
                        @if($row['employee_code'])<small class="text-muted d-block">{{ $row['employee_code'] }}</small>@endif
                    </td>
                    <td class="text-nowrap">{{ $row['category'] }}</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">{{ number_format($row['edli_wage'], 2) }}</td>
                    <td class="text-end">{{ number_format($row['employee_pf'], 2) }}</td>
                    <td class="text-end">{{ number_format($row['employee_vpf'], 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-end">{{ number_format($row['pf_admin_charge'], 2) }}</td>
                    <td class="text-end">{{ number_format($row['edli_charge'], 2) }}</td>
                    <td class="text-center">{{ $row['absent_days'] }}</td>
                    <td class="text-center">{{ $row['lop_days'] }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="17" 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>

    @if($data->total() > 0)
    <div class="card-footer d-flex justify-content-end py-1">
        {{ $data->links('pagination::bootstrap-5') }}
    </div>
    @endif

</div>

{{-- ======================================================
     Right Offcanvas — Filters
====================================================== --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="pfFilterCanvas" style="width:360px">

    <div class="offcanvas-header border-bottom py-1">
        <h5 class="offcanvas-title d-flex align-items-center gap-75 mb-0">
            <i data-feather="sliders" style="width:18px;height:18px"></i> Filters
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    {{-- The offcanvas IS the filter form: every select submits by its own name.
         GET reloads the page with the filters in the query string.
         d-flex column + min-height:0 keeps the body a scrollable flex child. --}}
    <form id="pf-filter-form" method="get" action="" class="d-flex flex-column flex-grow-1" style="min-height:0">

    <div class="offcanvas-body px-2 py-2 flex-grow-1" style="overflow-y:auto;min-height:0">

        {{-- Period --}}
        <p class="text-uppercase text-muted fw-semibold mb-50" style="font-size:.7rem;letter-spacing:.05em">Period</p>

        <div class="row g-1 mb-1">
            <div class="col-7">
                <label class="form-label mb-25" style="font-size:.8rem">Month</label>
                <select class="select2-oc form-select form-select-sm" id="oc-month" name="month">
                    @foreach ($months as $val => $label)
                        <option value="{{ $val }}" @selected($month == $val)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-5">
                <label class="form-label mb-25" style="font-size:.8rem">Year</label>
                <select class="select2-oc form-select form-select-sm" id="oc-year" name="year">
                    @for ($y = $currentYear - 4; $y <= $currentYear + 1; $y++)
                        <option value="{{ $y }}" @selected($year == $y)>{{ $y }}</option>
                    @endfor
                </select>
            </div>
        </div>

        <hr class="my-1">

        {{-- Employee --}}
        <p class="text-uppercase text-muted fw-semibold mb-50" style="font-size:.7rem;letter-spacing:.05em">Employee</p>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Select Employee(s)</label>
            <select id="oc-employee-select" name="employee_id[]" class="form-select form-select-sm" multiple style="width:100%">
                @foreach($selectedEmployees as $emp)
                    <option value="{{ $emp->id }}" selected>
                        {{ $emp->name }}{{ $emp->employee_code ? ' ('.$emp->employee_code.')' : '' }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Employee Type</label>
            <select class="select2-oc form-select form-select-sm" id="oc-employee-type" name="employee_type">
                <option value="">All</option>
                @foreach($employeeTypes as $label)
                    <option value="{{ $label }}" @selected(request('employee_type') == $label)>
                        {{ ucwords(str_replace('_', ' ', $label)) }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Employee Status</label>
            <select class="select2-oc form-select form-select-sm" id="oc-employee-status" name="employee_status">
                <option value="">All</option>
                @foreach($employeeStatuses as $label)
                    <option value="{{ $label }}" @selected(request('employee_status') == $label)>
                        {{ ucwords(str_replace('_', ' ', $label)) }}
                    </option>
                @endforeach
            </select>
        </div>

        <hr class="my-1">

        {{-- Org structure --}}
        <p class="text-uppercase text-muted fw-semibold mb-50" style="font-size:.7rem;letter-spacing:.05em">Organisation</p>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Department</label>
            <select class="select2-oc-multi form-select form-select-sm" id="oc-department" name="department_id[]" multiple>
                @foreach($departments as $d)
                    <option value="{{ $d->id }}" @selected(in_array($d->id, (array) request('department_id')))>{{ $d->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Sub-Department</label>
            <select class="select2-oc-multi form-select form-select-sm" id="oc-sub-department" name="sub_department_id[]" multiple>
                @foreach($subDepartments as $sd)
                    <option value="{{ $sd->id }}" @selected(in_array($sd->id, (array) request('sub_department_id')))>{{ $sd->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Designation</label>
            <select class="select2-oc-multi form-select form-select-sm" id="oc-designation" name="designation_id[]" multiple>
                @foreach($designations as $dg)
                    <option value="{{ $dg->id }}" @selected(in_array($dg->id, (array) request('designation_id')))>{{ $dg->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Location</label>
            <select class="select2-oc-multi form-select form-select-sm" id="oc-location" name="location_id[]" multiple>
                @foreach($locations as $l)
                    <option value="{{ $l->id }}" @selected(in_array($l->id, (array) request('location_id')))>{{ $l->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Sub-Location</label>
            <select class="select2-oc-multi form-select form-select-sm" id="oc-sublocation" name="sublocation_id[]" multiple>
                @foreach($subLocations as $sl)
                    <option value="{{ $sl->id }}" @selected(in_array($sl->id, (array) request('sublocation_id')))>{{ $sl->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Contractor</label>
            <select class="select2-oc-multi form-select form-select-sm" id="oc-contractor" name="contractor_id[]" multiple>
                @foreach($contractors as $c)
                    <option value="{{ $c->id }}" @selected(in_array($c->id, (array) request('contractor_id')))>{{ $c->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Category</label>
            <select class="select2-oc-multi form-select form-select-sm" id="oc-category" name="category_id[]" multiple>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" @selected(in_array($cat->id, (array) request('category_id')))>{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Work Station</label>
            <select class="select2-oc-multi form-select form-select-sm" id="oc-workstation" name="work_station_id[]" multiple>
                @foreach($workstations as $ws)
                    <option value="{{ $ws->id }}" @selected(in_array($ws->id, (array) request('work_station_id')))>{{ $ws->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <label class="form-label mb-25" style="font-size:.8rem">Shift</label>
            <select class="select2-oc-multi form-select form-select-sm" id="oc-shift" name="shift_id[]" multiple>
                @foreach($shifts as $sh)
                    <option value="{{ $sh->id }}" @selected(in_array($sh->id, (array) request('shift_id')))>{{ $sh->name }}</option>
                @endforeach
            </select>
        </div>

    </div>

    <div class="offcanvas-footer border-top d-flex gap-1 p-1">
        <button type="submit" class="btn btn-primary btn-sm flex-fill">
            <i data-feather="check" class="font-small-3 me-25"></i> Apply
        </button>
        <a href="?month={{ $month }}&year={{ $year }}"
           class="btn btn-outline-secondary btn-sm flex-fill">
            <i data-feather="rotate-ccw" class="font-small-3 me-25"></i> Reset
        </a>
    </div>

    </form>

</div>

@endsection

@push('footer-script')
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script>
$(document).ready(function () {
    feather.replace();

    // Single selects inside offcanvas
    $('.select2-oc').each(function () {
        $(this).select2({ dropdownParent: $('#pfFilterCanvas'), minimumResultsForSearch: Infinity });
    });
    // Multi selects inside offcanvas
    $('.select2-oc-multi').each(function () {
        $(this).select2({ dropdownParent: $('#pfFilterCanvas'), placeholder: '— All —', allowClear: true });
    });

    // Employee AJAX select2
    function initEmployeeSelect2() {
        $('#oc-employee-select').select2({
            dropdownParent: $('#pfFilterCanvas'),
            placeholder: 'Search by name or code…',
            minimumInputLength: 1,
            allowClear: true,
            ajax: {
                url: '/ajax/hod-list',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return { alias: '{{ $alias }}', search: params.term, only_current_organization: true };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data.data, function (item) {
                            return {
                                id: item.id,
                                text: item.name + (item.employee_code ? ' (' + item.employee_code + ')' : '')
                            };
                        })
                    };
                },
                cache: true
            }
        });
    }

    // Re-init all select2s after offcanvas opens (required for correct dropdown positioning)
    document.getElementById('pfFilterCanvas').addEventListener('shown.bs.offcanvas', function () {
        $('.select2-oc, .select2-oc-multi').each(function () { $(this).select2('destroy'); });
        $('.select2-oc').each(function () {
            $(this).select2({ dropdownParent: $('#pfFilterCanvas'), minimumResultsForSearch: Infinity });
        });
        $('.select2-oc-multi').each(function () {
            $(this).select2({ dropdownParent: $('#pfFilterCanvas'), placeholder: '— All —', allowClear: true });
        });
        if (!$('#oc-employee-select').data('select2')) { initEmployeeSelect2(); }
        feather.replace();
    });

    initEmployeeSelect2();

    // Each select submits by its own name; the form's submit button (Apply)
    // does a plain GET — no manual value copying needed.
});
</script>
@endpush