@extends('employee.layouts.app')
@section('title', get_setting('site_name').' | My PF')
@section('content')
    <style>
        .pf-loan-table th, .pf-loan-table td { vertical-align: middle; }
        #pfLoanDetailModal .modal-body { max-height: 70vh; overflow-y: auto; }
    </style>
    <div class="row mt-3 mb-3">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <h5 class="mb-0">{{ __('My Provident Fund (PF)') }}</h5>
                    <div class="d-flex flex-wrap align-items-center" style="gap: .35rem;">
                        <a class="btn btn-sm btn-outline-success" href="{{ route('employee.pf.statement.pdf', request()->query()) }}">{{ __('PDF') }}</a>
                        <a class="btn btn-sm btn-outline-primary" href="{{ route('employee.pf.statement.excel', request()->query()) }}">{{ __('Excel') }}</a>
                        <form method="get" action="{{ route('employee.pf.yearly_certificate') }}" class="d-flex align-items-center">
                            <select name="year" class="form-control form-control-sm mr-1" style="width:auto;">
                                @for($y = (int) date('Y'); $y >= 2020; $y--)
                                    <option value="{{ $y }}" @selected((int) request('year', date('Y')) === $y)>{{ $y }}</option>
                                @endfor
                            </select>
                            <button type="submit" class="btn btn-sm btn-outline-secondary">{{ __('Yearly certificate') }}</button>
                        </form>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-3 mb-2">
                            <div class="text-muted small">{{ __('Current Balance') }}</div>
                            <div class="h5 mb-0">{{ number_format((float)$balance, 2) }}</div>
                        </div>
                        <div class="col-md-3 mb-2">
                            <div class="text-muted small">{{ __('Total Employee Contrib') }}</div>
                            <div class="h5 mb-0">{{ number_format((float)$totalEmp, 2) }}</div>
                        </div>
                        <div class="col-md-3 mb-2">
                            <div class="text-muted small">{{ __('Total Employer Contrib') }}</div>
                            <div class="h5 mb-0">{{ number_format((float)$totalEmployer, 2) }}</div>
                        </div>
                        <div class="col-md-3 mb-2">
                            <div class="text-muted small">{{ __('Outstanding Loan') }}</div>
                            <div class="h5 mb-0">{{ number_format((float)$outstandingLoan, 2) }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">{{ __('Statement') }}</h5>
                </div>
                <div class="card-body">
                    <form method="get" class="mb-3">
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label class="small text-muted mb-1">{{ __('From') }}</label>
                                <input type="date" name="from" class="form-control form-control-sm" value="{{ request('from') }}">
                            </div>
                            <div class="form-group col-md-3">
                                <label class="small text-muted mb-1">{{ __('To') }}</label>
                                <input type="date" name="to" class="form-control form-control-sm" value="{{ request('to') }}">
                            </div>
                            <div class="form-group col-md-3">
                                <label class="small text-muted mb-1">{{ __('Type') }}</label>
                                <select name="type" class="form-control form-control-sm">
                                    <option value="">{{ __('All') }}</option>
                                    @foreach(['OPENING_BALANCE','INTEREST','CONTRIB_EMP','CONTRIB_EMPLOYER','LOAN_DISBURSE','LOAN_REPAY','LOAN_SERVICE_CHARGE','WITHDRAWAL','ADJUST'] as $t)
                                        <option value="{{ $t }}" @selected(request('type') === $t)>{{ $t }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-3 d-flex align-items-end">
                                <button class="btn btn-primary btn-sm mr-2" type="submit">{{ __('Filter') }}</button>
                                <a class="btn btn-outline-secondary btn-sm" href="{{ route('employee.pf') }}">{{ __('Clear') }}</a>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table table-bordered table-sm mb-0">
                            <thead>
                            <tr>
                                <th>{{ __('Date') }}</th>
                                <th>{{ __('Type') }}</th>
                                <th class="text-right">{{ __('Amount') }}</th>
                                <th>{{ __('Ref') }}</th>
                                <th>{{ __('Notes') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($rows as $row)
                                <tr>
                                    <td>{{ $row->entry_date?->format('Y-m-d') }}</td>
                                    <td>{{ $row->type }}</td>
                                    <td class="text-right {{ $row->amount < 0 ? 'text-danger' : 'text-success' }}">{{ number_format((float)$row->amount, 2) }}</td>
                                    <td>{{ $row->ref_type }} @if($row->ref_id) (#{{ $row->ref_id }}) @endif</td>
                                    <td class="text-muted small">{{ $row->notes }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-center text-muted">{{ __('No records') }}</td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3">
                        {{ $rows->links() }}
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">{{ __('Loan History') }}</h5>
                    <span class="text-muted small">{{ __('View details per loan') }}</span>
                </div>
                <div class="card-body p-2">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm mb-0 pf-loan-table">
                            <thead class="thead-light">
                            <tr>
                                <th>{{ __('Loan') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th class="text-right">{{ __('Principal') }}</th>
                                <th class="text-right">{{ __('Outstanding') }}</th>
                                <th>{{ __('Period') }}</th>
                                <th>{{ __('Progress') }}</th>
                                <th>{{ __('Requested') }}</th>
                                <th class="text-right">{{ __('Action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($loans as $loan)
                                @php
                                    $paidCount = $loan->installments->where('status', 'paid')->count();
                                    $totalInst = $loan->installments->count();
                                    $statusClass = match ($loan->status) {
                                        'active' => 'badge-primary',
                                        'pending' => 'badge-warning',
                                        'closed' => 'badge-success',
                                        'rejected' => 'badge-danger',
                                        default => 'badge-secondary',
                                    };
                                @endphp
                                <tr>
                                    <td><strong>#{{ $loan->id }}</strong></td>
                                    <td><span class="badge {{ $statusClass }}">{{ ucfirst($loan->status) }}</span></td>
                                    <td class="text-right">{{ number_format((float) $loan->principal, 2) }}</td>
                                    <td class="text-right">{{ number_format((float) $loan->outstanding, 2) }}</td>
                                    <td>{{ $loan->loan_period_months ? $loan->loan_period_months.' '.__('mo') : '—' }}</td>
                                    <td class="small text-muted">
                                        @if($totalInst > 0)
                                            {{ $paidCount }}/{{ $totalInst }} {{ __('paid') }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>{{ $loan->requested_at?->format('Y-m-d') ?? '—' }}</td>
                                    <td class="text-right">
                                        <button type="button"
                                                class="btn btn-sm btn-outline-primary btn-pf-loan-detail"
                                                data-loan-id="{{ $loan->id }}"
                                                data-loan-label="#{{ $loan->id }}">
                                            <i class="mdi mdi-eye-outline"></i> {{ __('View') }}
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-3">{{ __('No loan records yet.') }}</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            @foreach($loans as $loan)
                <div id="pf-loan-detail-{{ $loan->id }}" class="d-none">
                    @include('employee.pf.partials.loan_detail_content', [
                        'loan' => $loan,
                        'repayments' => $repayments,
                        'loanServiceChargeYearlyPercent' => $loanServiceChargeYearlyPercent,
                    ])
                </div>
            @endforeach

            <div class="modal fade" id="pfLoanDetailModal" tabindex="-1" role="dialog" aria-labelledby="pfLoanDetailModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pfLoanDetailModalLabel">{{ __('Loan Details') }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" id="pfLoanDetailModalBody"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">{{ __('Close') }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-header"><h5 class="mb-0">{{ __('Request PF Loan') }}</h5></div>
                        <div class="card-body">
                            <form method="post" action="{{ route('employee.pf.loan.request') }}" id="pf-loan-request-form">
                                @csrf
                                <div class="form-group">
                                    <label class="d-flex align-items-center flex-wrap" style="gap: .35rem;">
                                        <span>{{ __('Amount') }}</span>
                                        @if($maxLoanAllowed !== null)
                                            <span class="badge badge-info">{{ __('Max loan') }}: {{ number_format($maxLoanAllowed, 2) }}</span>
                                        @endif
                                    </label>
                                    <input type="number" step="0.01" min="1"
                                           @if($maxLoanAllowed !== null) max="{{ $maxLoanAllowed }}" @endif
                                           name="amount" id="pf_loan_amount" class="form-control"
                                           value="{{ old('amount') }}" required>
                                    @if($maxLoanAllowed !== null)
                                        <small class="text-muted">{{ __('You can borrow up to :amount based on your PF balance.', ['amount' => number_format($maxLoanAllowed, 2)]) }}</small>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label>{{ __('Loan period (months)') }}</label>
                                    <select name="loan_period_months" id="pf_loan_period" class="form-control" required>
                                        <option value="">{{ __('Select period') }}</option>
                                        @foreach([12, 18, 24, 30] as $months)
                                            <option value="{{ $months }}" @selected((int) old('loan_period_months') === $months)>{{ $months }} {{ __('months') }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>{{ __('Monthly installment') }}</label>
                                    <input type="text" id="pf_loan_installment_preview" class="form-control" readonly
                                           placeholder="{{ __('Select amount and period') }}">
                                    <small class="text-muted d-block">{{ __('Estimated equal monthly principal after approval.') }}</small>
                                    <small class="text-muted d-block">{{ __('Loan service charge :pct% yearly per installment if paid on/after the 16th of the due month; no charge if paid by the 15th.', ['pct' => number_format($loanServiceChargeYearlyPercent, 2)]) }}</small>
                                </div>
                                <div class="form-group">
                                    <label>{{ __('Repayment mode') }}</label>
                                    <select name="repayment_mode" class="form-control" required>
                                        <option value="">{{ __('Select') }}</option>
                                        <option value="payroll" @selected(old('repayment_mode') === 'payroll')>{{ __('Payroll') }}</option>
                                        <option value="manual" @selected(old('repayment_mode') === 'manual')>{{ __('Manual') }}</option>
                                        <option value="either" @selected(old('repayment_mode', 'either') === 'either')>{{ __('Either') }}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>{{ __('Guarantors') }} <span class="text-muted small">({{ __('minimum 3') }})</span></label>
                                    <select name="guarantors[]" id="pf_loan_guarantors" class="form-control select2" multiple required
                                            data-placeholder="{{ __('Select at least 3 employees') }}">
                                        @foreach($guarantorStaff as $gStaff)
                                            @if($gStaff->user)
                                                <option value="{{ $gStaff->user->id }}"
                                                    @selected(collect(old('guarantors', []))->map(fn ($v) => (int) $v)->contains((int) $gStaff->user->id))>
                                                    {{ $gStaff->user->name }}({{ $gStaff->user->id }})
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>{{ __('Reason') }}</label>
                                    <textarea name="reason" class="form-control" rows="3" required>{{ old('reason') }}</textarea>
                                </div>
                                <button class="btn btn-primary" type="submit">{{ __('Submit') }}</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-header"><h5 class="mb-0">{{ __('Request Withdrawal') }}</h5></div>
                        <div class="card-body">
                            <form method="post" action="{{ route('employee.pf.withdrawal.request') }}">
                                @csrf
                                <div class="form-group">
                                    <label>{{ __('Amount') }}</label>
                                    <input type="number" step="0.01" min="1" name="amount" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>{{ __('Reason') }}</label>
                                    <textarea name="reason" class="form-control" rows="3"></textarea>
                                </div>
                                <button class="btn btn-primary" type="submit">{{ __('Submit') }}</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(function () {
            var $guarantors = $('#pf_loan_guarantors');
            if ($guarantors.length && $.fn.select2) {
                $guarantors.select2({
                    width: '100%',
                    placeholder: $guarantors.data('placeholder')
                });
            }

            function updateInstallmentPreview() {
                var amount = parseFloat($('#pf_loan_amount').val());
                var period = parseInt($('#pf_loan_period').val(), 10);
                var $preview = $('#pf_loan_installment_preview');
                if (!amount || amount <= 0 || !period) {
                    $preview.val('');
                    return;
                }
                $preview.val((amount / period).toFixed(2));
            }

            $('#pf_loan_amount, #pf_loan_period').on('input change', updateInstallmentPreview);
            updateInstallmentPreview();

            $('#pf-loan-request-form').on('submit', function (e) {
                var selected = ($guarantors.val() || []).length;
                if (selected < 3) {
                    e.preventDefault();
                    toastr.error('{{ __('Please select at least 3 guarantors.') }}');
                }
            });

            $('.btn-pf-loan-detail').on('click', function () {
                var loanId = $(this).data('loan-id');
                var label = $(this).data('loan-label') || ('#' + loanId);
                var $source = $('#pf-loan-detail-' + loanId);
                if (!$source.length) {
                    return;
                }
                $('#pfLoanDetailModalLabel').text('{{ __('Loan') }} ' + label);
                $('#pfLoanDetailModalBody').html($source.html());
                $('#pfLoanDetailModal').modal('show');
            });
        });
    </script>
@endsection