@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">New Deduction</h1>
                    <p class="text-muted">{{ $company->name }} - Create deduction or statutory contribution</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.payroll-settings.deductions', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Deductions
                    </a>
                </div>
            </div>
        </div>
    </div>

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

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

                        <!-- Basic Information -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Basic Information</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       name="name" value="{{ old('name') }}" 
                                       placeholder="e.g., Insurance Premium" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">E/F Fields</label>
                                <input type="text" class="form-control @error('ef_fields') is-invalid @enderror" 
                                       name="ef_fields" value="{{ old('ef_fields') }}" 
                                       placeholder="e.g., D2" maxlength="10">
                                @error('ef_fields')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Form A, EA, EC reporting fields</small>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <label class="form-label">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          name="description" rows="3" 
                                          placeholder="Brief description of this deduction...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Deduction Type -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Deduction Calculation</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Deduction Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('deduction_type') is-invalid @enderror" 
                                        name="deduction_type" id="deduction_type" required>
                                    <option value="">Select Type</option>
                                    <option value="fixed" {{ old('deduction_type') === 'fixed' ? 'selected' : '' }}>
                                        Fixed Amount
                                    </option>
                                    <option value="percentage" {{ old('deduction_type') === 'percentage' ? 'selected' : '' }}>
                                        Percentage of Salary
                                    </option>
                                    <option value="formula" {{ old('deduction_type') === 'formula' ? 'selected' : '' }}>
                                        Formula-based
                                    </option>
                                </select>
                                @error('deduction_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" id="amount_label">Amount/Percentage <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text" id="amount_prefix">RM</span>
                                    <input type="number" step="0.01" min="0" 
                                           class="form-control @error('amount_or_percentage') is-invalid @enderror" 
                                           name="amount_or_percentage" value="{{ old('amount_or_percentage', '0.00') }}" 
                                           placeholder="0.00" id="amount_input" required>
                                    @error('amount_or_percentage')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted" id="amount_help">Enter the fixed amount or percentage</small>
                            </div>
                        </div>

                        <!-- Formula (shown only for formula type) -->
                        <div class="row mb-4" id="formula_section" style="display: none;">
                            <div class="col-12">
                                <label class="form-label">Calculation Formula</label>
                                <textarea class="form-control @error('calculation_formula') is-invalid @enderror" 
                                          name="calculation_formula" rows="3" 
                                          placeholder="e.g., IF(salary > 5000, salary * 0.02, 0)">{{ old('calculation_formula') }}</textarea>
                                @error('calculation_formula')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Advanced formula for complex calculations (optional)</small>
                            </div>
                        </div>

                        <!-- Limits -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Deduction Limits</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Minimum Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" 
                                           class="form-control @error('minimum_amount') is-invalid @enderror" 
                                           name="minimum_amount" value="{{ old('minimum_amount') }}" 
                                           placeholder="0.00">
                                    @error('minimum_amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Minimum deduction amount (optional)</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Maximum Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" 
                                           class="form-control @error('maximum_amount') is-invalid @enderror" 
                                           name="maximum_amount" value="{{ old('maximum_amount') }}" 
                                           placeholder="0.00">
                                    @error('maximum_amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Maximum deduction amount (optional)</small>
                            </div>
                        </div>

                        <!-- Classification -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Classification</h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="is_statutory" 
                                           id="is_statutory" value="1" 
                                           {{ old('is_statutory') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_statutory">
                                        <strong>Statutory Deduction</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Check if this is required by Malaysian law (EPF, SOCSO, EIS, Tax)</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Assigned to <span class="text-danger">*</span></label>
                                <select class="form-select @error('assigned_to') is-invalid @enderror" 
                                        name="assigned_to" required>
                                    <option value="everyone" {{ old('assigned_to', 'everyone') === 'everyone' ? 'selected' : '' }}>
                                        Everyone
                                    </option>
                                    <option value="specific" {{ old('assigned_to') === 'specific' ? 'selected' : '' }}>
                                        Specific employees
                                    </option>
                                </select>
                                @error('assigned_to')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Who this deduction applies to</small>
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="is_enabled" 
                                           id="is_enabled" value="1" 
                                           {{ old('is_enabled', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_enabled">
                                        <strong>Enable this deduction</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Deduction will be available for payroll processing</small>
                            </div>
                        </div>

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

        <!-- Quick Templates -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Statutory Deductions</h6>
                </div>
                <div class="card-body">
                    <p class="small text-muted">Click to auto-fill statutory deductions:</p>
                    
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-warning btn-sm template-btn" 
                                data-template="epf_employee">
                            <i class="bi bi-piggy-bank me-1"></i> EPF Employee (11%)
                        </button>
                        <button type="button" class="btn btn-outline-info btn-sm template-btn" 
                                data-template="socso_employee">
                            <i class="bi bi-hospital me-1"></i> SOCSO Employee
                        </button>
                        <button type="button" class="btn btn-outline-primary btn-sm template-btn" 
                                data-template="eis_employee">
                            <i class="bi bi-briefcase me-1"></i> EIS Employee (0.2%)
                        </button>
                        <button type="button" class="btn btn-outline-dark btn-sm template-btn" 
                                data-template="income_tax">
                            <i class="bi bi-calculator me-1"></i> Income Tax (MTD)
                        </button>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Voluntary Deductions</h6>
                </div>
                <div class="card-body">
                    <p class="small text-muted">Common voluntary deductions:</p>
                    
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-success btn-sm template-btn" 
                                data-template="insurance">
                            <i class="bi bi-shield-check me-1"></i> Insurance Premium
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm template-btn" 
                                data-template="loan">
                            <i class="bi bi-credit-card me-1"></i> Loan Repayment
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm template-btn" 
                                data-template="zakat">
                            <i class="bi bi-moon me-1"></i> Zakat (2.5%)
                        </button>
                        <button type="button" class="btn btn-outline-info btn-sm template-btn" 
                                data-template="asnb">
                            <i class="bi bi-graph-up me-1"></i> ASNB Investment
                        </button>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Calculation Preview</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Test Salary (RM)</label>
                        <input type="number" class="form-control" id="preview_salary" value="3000" placeholder="Enter salary">
                    </div>
                    <div class="calculation-preview bg-light p-3 rounded">
                        <h6>Preview:</h6>
                        <div id="preview_result">Enter deduction details to see calculation</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const deductionTypeSelect = document.getElementById('deduction_type');
    const amountInput = document.getElementById('amount_input');
    const amountLabel = document.getElementById('amount_label');
    const amountPrefix = document.getElementById('amount_prefix');
    const amountHelp = document.getElementById('amount_help');
    const formulaSection = document.getElementById('formula_section');
    const previewSalary = document.getElementById('preview_salary');
    
    // Statutory and voluntary deduction templates
    const templates = {
        epf_employee: {
            name: 'EPF Employee',
            description: 'Employees Provident Fund - Employee contribution (11%)',
            deduction_type: 'percentage',
            amount_or_percentage: '11.00',
            ef_fields: 'D1',
            is_statutory: true,
            assigned_to: 'everyone'
        },
        socso_employee: {
            name: 'SOCSO Employee',
            description: 'Social Security Organisation - Employee contribution',
            deduction_type: 'formula',
            amount_or_percentage: '0.00',
            ef_fields: 'D2',
            is_statutory: true,
            assigned_to: 'everyone'
        },
        eis_employee: {
            name: 'EIS Employee',
            description: 'Employment Insurance System - Employee contribution (0.2%)',
            deduction_type: 'percentage',
            amount_or_percentage: '0.20',
            ef_fields: 'D3',
            is_statutory: true,
            assigned_to: 'everyone'
        },
        income_tax: {
            name: 'Income Tax',
            description: 'Monthly Tax Deduction (MTD) - Based on LHDN tax table',
            deduction_type: 'formula',
            amount_or_percentage: '0.00',
            ef_fields: 'CP8D',
            is_statutory: true,
            assigned_to: 'everyone'
        },
        insurance: {
            name: 'Insurance Premium',
            description: 'Monthly health/life insurance premium deduction',
            deduction_type: 'fixed',
            amount_or_percentage: '50.00',
            ef_fields: '',
            is_statutory: false,
            assigned_to: 'specific'
        },
        loan: {
            name: 'Loan Repayment',
            description: 'Monthly loan or advance repayment',
            deduction_type: 'fixed',
            amount_or_percentage: '200.00',
            ef_fields: '',
            is_statutory: false,
            assigned_to: 'specific'
        },
        zakat: {
            name: 'Zakat',
            description: 'Islamic religious contribution (2.5% of eligible income)',
            deduction_type: 'percentage',
            amount_or_percentage: '2.50',
            ef_fields: '',
            is_statutory: false,
            assigned_to: 'specific'
        },
        asnb: {
            name: 'ASNB Investment',
            description: 'Amanah Saham Nasional Berhad unit trust investment',
            deduction_type: 'fixed',
            amount_or_percentage: '100.00',
            ef_fields: '',
            is_statutory: false,
            assigned_to: 'specific'
        }
    };
    
    function updateFormLabels() {
        const type = deductionTypeSelect.value;
        
        if (type === 'percentage') {
            amountLabel.textContent = 'Percentage of Salary';
            amountPrefix.textContent = '%';
            amountHelp.textContent = 'Percentage of employee salary to deduct';
            formulaSection.style.display = 'none';
        } else if (type === 'fixed') {
            amountLabel.textContent = 'Fixed Amount';
            amountPrefix.textContent = 'RM';
            amountHelp.textContent = 'Fixed amount to deduct from salary';
            formulaSection.style.display = 'none';
        } else if (type === 'formula') {
            amountLabel.textContent = 'Base Amount (optional)';
            amountPrefix.textContent = 'RM';
            amountHelp.textContent = 'Base amount for formula calculation';
            formulaSection.style.display = 'block';
        } else {
            amountLabel.textContent = 'Amount/Percentage';
            amountPrefix.textContent = 'RM';
            amountHelp.textContent = 'Enter the fixed amount or percentage';
            formulaSection.style.display = 'none';
        }
        
        updatePreview();
    }
    
    function updatePreview() {
        const type = deductionTypeSelect.value;
        const amount = parseFloat(amountInput.value) || 0;
        const salary = parseFloat(previewSalary.value) || 0;
        
        let deductionAmount = 0;
        let calculation = '';
        
        if (salary === 0) {
            document.getElementById('preview_result').innerHTML = 'Enter salary amount to see preview';
            return;
        }
        
        switch (type) {
            case 'fixed':
                deductionAmount = amount;
                calculation = `Fixed: RM${amount.toFixed(2)}`;
                break;
            case 'percentage':
                deductionAmount = salary * (amount / 100);
                calculation = `${amount}% of RM${salary.toFixed(2)} = RM${deductionAmount.toFixed(2)}`;
                break;
            case 'formula':
                calculation = 'Formula-based calculation';
                break;
            default:
                calculation = 'Select deduction type to see preview';
        }
        
        const resultHtml = type === 'formula' ? calculation : `
            <div class="small">
                <div class="row mb-1">
                    <div class="col-6">Salary:</div>
                    <div class="col-6">RM${salary.toFixed(2)}</div>
                </div>
                <div class="row mb-1">
                    <div class="col-6">Calculation:</div>
                    <div class="col-6">${calculation}</div>
                </div>
                <hr class="my-2">
                <div class="row">
                    <div class="col-6"><strong>Net Deduction:</strong></div>
                    <div class="col-6"><strong class="text-danger">-RM${deductionAmount.toFixed(2)}</strong></div>
                </div>
                <div class="row">
                    <div class="col-6"><strong>Net Pay:</strong></div>
                    <div class="col-6"><strong class="text-success">RM${(salary - deductionAmount).toFixed(2)}</strong></div>
                </div>
            </div>
        `;
        
        document.getElementById('preview_result').innerHTML = resultHtml;
    }
    
    // Event listeners
    deductionTypeSelect.addEventListener('change', updateFormLabels);
    amountInput.addEventListener('input', updatePreview);
    previewSalary.addEventListener('input', updatePreview);
    
    // Template buttons
    document.querySelectorAll('.template-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const templateName = this.dataset.template;
            const template = templates[templateName];
            
            if (template) {
                // Fill form fields
                document.querySelector('input[name="name"]').value = template.name;
                document.querySelector('textarea[name="description"]').value = template.description;
                document.querySelector('select[name="deduction_type"]').value = template.deduction_type;
                document.querySelector('input[name="amount_or_percentage"]').value = template.amount_or_percentage;
                document.querySelector('input[name="ef_fields"]').value = template.ef_fields;
                document.querySelector('select[name="assigned_to"]').value = template.assigned_to;
                
                // Set checkboxes
                document.querySelector('input[name="is_statutory"]').checked = template.is_statutory;
                
                // Update form labels and preview
                updateFormLabels();
                
                // Highlight the form
                document.querySelector('.card').scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
    
    // Initial setup
    updateFormLabels();
});
</script>
@endpush
@endsection