@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <style>
        .content-header.row {
            flex-wrap: nowrap;
        }
        .content-header.row .content-header-left {
            flex: 1 1 auto;
            max-width: none;
            width: auto;
            min-width: 0;
        }
        .content-header.row .content-header-right {
            flex: 0 0 auto;
            width: auto;
        }
        #reimbursementTable thead th {
            position: sticky;
            top: 0;
            background: var(--bs-card-bg, #fff);
            z-index: 1;
            white-space: nowrap;
        }
        #reimbursementTable tfoot td {
            font-weight: bold;
        }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Reimbursement Report</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/salary-fetch">Generate Salary</a></li>
                    <li class="breadcrumb-item active">Reimbursement Report</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end">
        <div class="d-flex flex-wrap justify-content-end align-items-center gap-1">
            <a href="/{!! $alias !!}/salary-fetch?month={{ $month }}&year={{ $year }}&payroll_period_id={{ @$payrollPeriod->id }}"
                class="btn btn-secondary btn-sm">
                <i data-feather="arrow-left-circle"></i> Back
            </a>

            <a href="/{!! $alias !!}/reimbursement-report/export?{!! request()->getQueryString() !!}"
                class="btn btn-success btn-sm">
                <i data-feather="download"></i> Export
            </a>

            @if ($employeeRows->total() > 0)
                <form method="post" id="postReimbursementCreditForm" action="/{!! $alias !!}/reimbursement-report/post-credit?{!! request()->getQueryString() !!}">
                    {{ csrf_field() }}
                    <input type="hidden" name="month" value="{{ $month }}">
                    <input type="hidden" name="year" value="{{ $year }}">
                    <input type="hidden" name="payroll_period_id" value="{{ @$payrollPeriod->id }}">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i data-feather="upload"></i> Post to Reimbursement Credit
                    </button>
                </form>
            @endif

            <button class="btn-icon btn btn-primary btn-round btn-sm"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasEnd"
                aria-controls="offcanvasEnd">
                <i data-feather="filter"></i>
            </button>
        </div>
    </div>
@endpush

@section('content')
    @include('filtters.common', $fillterData)

    @if (session('status'))
        <div class="demo-spacing-0">
            <div class="alert alert-success" role="alert">
                <div class="alert-body"><strong>{{ session('status') }}</strong></div>
            </div>
        </div>
    @endif

    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <h4 class="card-title mb-0">Reimbursement - {{ $month_name }} {{ $year }}</h4>
                        <div class="d-flex gap-2">
                            <span class="badge bg-light-primary">Employees: {{ $totalEmployees }}</span>
                            <span class="badge bg-light-success">Grand Total: {{ number_format($grandTotal, 2) }}</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 65vh; overflow-y: auto;">
                            <table class="table table-bordered table-hover" id="reimbursementTable">
                                <thead>
                                    <tr>
                                        <th>Employee</th>
                                        <th>Paid Days</th>
                                        @foreach ($reimbursementHeads as $head)
                                            <th>{{ $head }}</th>
                                        @endforeach
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($employeeRows as $row)
                                        <tr>
                                            <td>{{ trim(($row['employee']->first_name ?? '') . ' ' . ($row['employee']->last_name ?? '')) ?: '-' }} ({{ $row['employee']->employee_code ?? '-' }})</td>
                                            <td>{{ number_format($row['paid_days'], 2) }}</td>
                                            @foreach ($reimbursementHeads as $head)
                                                <td>{{ number_format($row['amounts'][$head] ?? 0, 2) }}</td>
                                            @endforeach
                                            <td>{{ number_format($row['total'], 2) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="{{ $reimbursementHeads->count() + 3 }}" class="text-center">No reimbursement data found for this period.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        @if ($employeeRows->hasPages())
                            <div class="mt-3">
                                {!! $employeeRows->onEachSide(1)->links() !!}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script>
        var postReimbursementCreditForm = document.getElementById('postReimbursementCreditForm');
        if (postReimbursementCreditForm) {
            postReimbursementCreditForm.addEventListener('submit', function (e) {
                if (!confirm('Post reimbursement amounts to Emp Reimbursement Credit for {{ $month_name }} {{ $year }}?')) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                }
            });
        }
    </script>
@endpush