@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">General Payroll Settings</h1>
                    <p class="text-muted">{{ $company->name }} - Configure basic payroll parameters</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">
        <!-- Settings Form -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">General Configuration</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.general.update', $company) }}">
                        @csrf
                        @method('PUT')

                        <!-- Signatory Information -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Signatory Information</h6>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Signatory for EPF, LHDN & SOCSO</label>
                                <input type="text" class="form-control @error('signatory_epf_lhdn_socso') is-invalid @enderror" 
                                       name="signatory_epf_lhdn_socso" 
                                       value="{{ old('signatory_epf_lhdn_socso', $settings->signatory_epf_lhdn_socso) }}" 
                                       placeholder="Enter authorized signatory name">
                                @error('signatory_epf_lhdn_socso')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Person authorized to sign EPF, LHDN and SOCSO documents</small>
                            </div>
                        </div>

                        <!-- Working Hours -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Working Hours Configuration</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Standard Working Hours per Day <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" step="0.25" min="0" max="24" 
                                           class="form-control @error('standard_working_hours') is-invalid @enderror" 
                                           name="standard_working_hours" 
                                           value="{{ old('standard_working_hours', $settings->standard_working_hours) }}" 
                                           required>
                                    <span class="input-group-text">hours</span>
                                    @error('standard_working_hours')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Standard working hours per day (e.g., 8.0 for 8 hours)</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Payroll Display Options</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="show_zero_net_pay" 
                                           id="show_zero_net_pay" value="1" 
                                           {{ old('show_zero_net_pay', $settings->show_zero_net_pay) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_zero_net_pay">
                                        Show payroll with zero net pay
                                    </label>
                                </div>
                                <small class="form-text text-muted">Display payroll entries even when net pay is RM 0.00</small>
                            </div>
                        </div>

                        <!-- HRDF Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Human Resources Development Fund (HRDF)</h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="hrdf_applicable" 
                                           id="hrdf_applicable" value="1" 
                                           {{ old('hrdf_applicable', $settings->hrdf_applicable) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="hrdf_applicable">
                                        <strong>HRDF is applicable to this company</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Companies with 10+ employees must contribute to HRDF</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">HRDF Contribution Percentage</label>
                                <div class="input-group">
                                    <input type="number" step="0.01" min="0" max="100" 
                                           class="form-control @error('hrdf_contribution_percentage') is-invalid @enderror" 
                                           name="hrdf_contribution_percentage" 
                                           value="{{ old('hrdf_contribution_percentage', $settings->hrdf_contribution_percentage) }}" 
                                           id="hrdf_percentage">
                                    <span class="input-group-text">%</span>
                                    @error('hrdf_contribution_percentage')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Usually 1.0% of monthly salary (minimum RM1)</small>
                            </div>
                        </div>

                        <!-- ASNB Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Amanah Saham Nasional Berhad (ASNB)</h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="asnb_applicable" 
                                           id="asnb_applicable" value="1" 
                                           {{ old('asnb_applicable', $settings->asnb_applicable) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="asnb_applicable">
                                        <strong>ASNB deduction is available</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Allow employees to invest in ASNB through payroll deduction</small>
                            </div>
                        </div>

                        <!-- Payroll Cycles -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Payroll Processing</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Payroll Cycles per Month <span class="text-danger">*</span></label>
                                <select class="form-select @error('payroll_cycles_per_month') is-invalid @enderror" 
                                        name="payroll_cycles_per_month" required>
                                    <option value="one" {{ old('payroll_cycles_per_month', $settings->payroll_cycles_per_month) === 'one' ? 'selected' : '' }}>
                                        Once per month
                                    </option>
                                    <option value="two" {{ old('payroll_cycles_per_month', $settings->payroll_cycles_per_month) === 'two' ? 'selected' : '' }}>
                                        Twice per month
                                    </option>
                                </select>
                                @error('payroll_cycles_per_month')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">How often payroll is processed each month</small>
                            </div>
                        </div>

                        <!-- Module Integration -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Module Integration</h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="auto_link_claims" 
                                           id="auto_link_claims" value="1" 
                                           {{ old('auto_link_claims', $settings->auto_link_claims) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="auto_link_claims">
                                        Auto-link with Claims module
                                    </label>
                                </div>
                                <small class="form-text text-muted">Automatically include approved claims in payroll</small>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="auto_link_hadir_time_management" 
                                           id="auto_link_hadir" value="1" 
                                           {{ old('auto_link_hadir_time_management', $settings->auto_link_hadir_time_management) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="auto_link_hadir">
                                        Auto-link with Time Management
                                    </label>
                                </div>
                                <small class="form-text text-muted">Automatically calculate overtime from attendance data</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 General Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Settings Information -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Malaysian Compliance Guide</h6>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h6 class="text-primary">Working Hours</h6>
                        <p class="small">Malaysia's Employment Act 1955 specifies:</p>
                        <ul class="small">
                            <li>Maximum 8 hours per day</li>
                            <li>Maximum 48 hours per week</li>
                            <li>Overtime beyond normal hours</li>
                        </ul>
                    </div>

                    <div class="mb-4">
                        <h6 class="text-primary">HRDF Contribution</h6>
                        <p class="small">Required for companies with:</p>
                        <ul class="small">
                            <li>10 or more employees</li>
                            <li>1% of monthly salary</li>
                            <li>Minimum RM1 per employee</li>
                            <li>Maximum RM200 per employee</li>
                        </ul>
                    </div>

                    <div class="mb-4">
                        <h6 class="text-primary">ASNB Investment</h6>
                        <p class="small">Optional unit trust investment:</p>
                        <ul class="small">
                            <li>Managed by Permodalan Nasional Berhad</li>
                            <li>Payroll deduction available</li>
                            <li>Helps employees build savings</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Next Steps</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('companies.hr.payroll-settings.epf', $company) }}" 
                           class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-piggy-bank me-1"></i> Configure EPF Settings
                        </a>
                        <a href="{{ route('companies.hr.payroll-settings.additions', $company) }}" 
                           class="btn btn-outline-success btn-sm">
                            <i class="bi bi-plus-circle me-1"></i> Setup Allowances
                        </a>
                        <a href="{{ route('companies.hr.payroll-settings.deductions', $company) }}" 
                           class="btn btn-outline-warning btn-sm">
                            <i class="bi bi-dash-circle me-1"></i> Configure Deductions
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const hrdfCheckbox = document.getElementById('hrdf_applicable');
    const hrdfPercentage = document.getElementById('hrdf_percentage');
    
    function toggleHrdfPercentage() {
        hrdfPercentage.disabled = !hrdfCheckbox.checked;
        if (!hrdfCheckbox.checked) {
            hrdfPercentage.value = '0.00';
        } else if (hrdfPercentage.value === '0.00') {
            hrdfPercentage.value = '1.00';
        }
    }
    
    hrdfCheckbox.addEventListener('change', toggleHrdfPercentage);
    toggleHrdfPercentage(); // Initial state
});
</script>
@endpush
@endsection