@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">EPF Settings</h1>
                    <p class="text-muted">{{ $company->name }} - Employees Provident Fund Configuration</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.payroll-settings.index', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Settings
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- EPF Configuration Form -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">EPF Employer Contribution Settings</h5>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('companies.hr.payroll-settings.epf.update', $company) }}">
                        @csrf
                        @method('PUT')

                        <!-- Employer Contribution Rate -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Employer Contribution Rate</h6>
                                <p class="text-info small">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Standard EPF employer contribution is 12% of employee's salary. Configure additional contributions below.
                                </p>
                            </div>
                            <div class="col-12">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="radio" name="epf_employer_rate" 
                                           id="extra_on_top" value="extra_on_top" 
                                           {{ old('epf_employer_rate', $settings->epf_employer_rate) === 'extra_on_top' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="extra_on_top">
                                        <strong>Extra on top of normal employer EPF</strong>
                                        <br>
                                        <small class="text-muted">
                                            Standard 12% + additional percentage for all employees
                                        </small>
                                    </label>
                                </div>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="radio" name="epf_employer_rate" 
                                           id="fixed_rate" value="fixed_rate" 
                                           {{ old('epf_employer_rate', $settings->epf_employer_rate) === 'fixed_rate' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="fixed_rate">
                                        <strong>Fixed rate for staff with salary RM5k+ on top of individual's extra</strong>
                                        <br>
                                        <small class="text-muted">
                                            Special rate for high earners (RM5,000+ monthly salary)
                                        </small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Percentage -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Additional EPF Employer Percentage <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" step="0.01" min="0" max="100" 
                                           class="form-control @error('epf_employer_addon_percentage') is-invalid @enderror" 
                                           name="epf_employer_addon_percentage" 
                                           value="{{ old('epf_employer_addon_percentage', $settings->epf_employer_addon_percentage) }}" 
                                           id="addon_percentage" required>
                                    <span class="input-group-text">%</span>
                                    @error('epf_employer_addon_percentage')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted" id="percentage_help">
                                    Additional percentage on top of standard 12% employer contribution
                                </small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Calculation Example</label>
                                <div class="bg-light p-3 rounded">
                                    <div class="small">
                                        <strong>For RM3,000 salary:</strong><br>
                                        Standard Employer EPF: RM360.00 (12%)<br>
                                        <span id="additional_amount">Additional: RM0.00 (0%)</span><br>
                                        <span id="total_employer">Total Employer: RM360.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Non-Malaysian Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Non-Malaysian Employee Settings</h6>
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle me-2"></i>
                                    By default, non-Malaysian employees are not required to contribute to EPF unless they opt in.
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="non_malaysian_normal_epf_rate" 
                                           id="non_malaysian_epf" value="1" 
                                           {{ old('non_malaysian_normal_epf_rate', $settings->non_malaysian_normal_epf_rate) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="non_malaysian_epf">
                                        <strong>Apply normal EPF rates to non-Malaysian employees</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">
                                    When checked, non-Malaysian employees will contribute 11% and employer contributes 12% (same as Malaysian employees)
                                </small>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <a href="{{ route('companies.hr.payroll-settings.index', $company) }}" 
                               class="btn btn-secondary me-2">Cancel</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle"></i> Save EPF Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- EPF Calculation Summary -->
            <div class="card mt-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">Current EPF Configuration Summary</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary">Malaysian Employees</h6>
                            <table class="table table-sm">
                                <tr>
                                    <td>Employee Contribution:</td>
                                    <td><strong>11%</strong></td>
                                </tr>
                                <tr>
                                    <td>Employer Contribution:</td>
                                    <td><strong>12% + {{ $settings->epf_employer_addon_percentage }}%</strong></td>
                                </tr>
                                <tr>
                                    <td>Total Contribution:</td>
                                    <td><strong>{{ 23 + $settings->epf_employer_addon_percentage }}%</strong></td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-primary">Non-Malaysian Employees</h6>
                            @if($settings->non_malaysian_normal_epf_rate)
                                <table class="table table-sm">
                                    <tr>
                                        <td>Employee Contribution:</td>
                                        <td><strong>11%</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Employer Contribution:</td>
                                        <td><strong>12% + {{ $settings->epf_employer_addon_percentage }}%</strong></td>
                                    </tr>
                                    <tr>
                                        <td>Total Contribution:</td>
                                        <td><strong>{{ 23 + $settings->epf_employer_addon_percentage }}%</strong></td>
                                    </tr>
                                </table>
                            @else
                                <div class="text-muted">
                                    <p>No EPF contribution required unless employee opts in individually.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- EPF Information Sidebar -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">EPF Contribution Rates</h6>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h6 class="text-success">Standard Rates (Malaysian)</h6>
                        <ul class="list-unstyled">
                            <li><strong>Employee:</strong> 11% of salary</li>
                            <li><strong>Employer:</strong> 12% of salary</li>
                            <li><strong>Total:</strong> 23% of salary</li>
                        </ul>
                    </div>

                    <div class="mb-4">
                        <h6 class="text-info">Salary Thresholds</h6>
                        <ul class="list-unstyled small">
                            <li><strong>Minimum contributory salary:</strong> RM20</li>
                            <li><strong>Maximum contributory salary:</strong> No limit</li>
                            <li><strong>Age 60+:</strong> Reduced rates apply</li>
                        </ul>
                    </div>

                    <div class="mb-4">
                        <h6 class="text-warning">Special Cases</h6>
                        <ul class="list-unstyled small">
                            <li><strong>Non-Malaysians:</strong> Optional participation</li>
                            <li><strong>Employees 60+:</strong> Different contribution rates</li>
                            <li><strong>Part-time workers:</strong> Pro-rated contributions</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">EPF Account Types</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Account 1 (70%)</strong>
                        <p class="small text-muted">For retirement at age 55</p>
                    </div>
                    <div class="mb-3">
                        <strong>Account 2 (30%)</strong>
                        <p class="small text-muted">For housing, education, and healthcare</p>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Compliance Requirements</h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled small">
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            Submit contributions by 15th of following month
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            Use KWSP online submission system
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            Maintain accurate employee records
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            Issue annual EPF statements
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const addonPercentageInput = document.getElementById('addon_percentage');
    const extraOnTopRadio = document.getElementById('extra_on_top');
    const fixedRateRadio = document.getElementById('fixed_rate');
    const percentageHelp = document.getElementById('percentage_help');
    const additionalAmount = document.getElementById('additional_amount');
    const totalEmployer = document.getElementById('total_employer');
    
    function updateCalculationExample() {
        const percentage = parseFloat(addonPercentageInput.value) || 0;
        const salary = 3000;
        const standardEpf = salary * 0.12; // 12%
        const additionalEpf = salary * (percentage / 100);
        const totalEpf = standardEpf + additionalEpf;
        
        additionalAmount.textContent = `Additional: RM${additionalEpf.toFixed(2)} (${percentage}%)`;
        totalEmployer.textContent = `Total Employer: RM${totalEpf.toFixed(2)}`;
    }
    
    function updateHelpText() {
        if (fixedRateRadio.checked) {
            percentageHelp.textContent = 'Fixed percentage for employees earning RM5,000+ monthly';
        } else {
            percentageHelp.textContent = 'Additional percentage on top of standard 12% employer contribution';
        }
        updateCalculationExample();
    }
    
    addonPercentageInput.addEventListener('input', updateCalculationExample);
    extraOnTopRadio.addEventListener('change', updateHelpText);
    fixedRateRadio.addEventListener('change', updateHelpText);
    
    // Initial update
    updateHelpText();
});
</script>
@endpush
@endsection