@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">Payment Deductions</h1>
                    <p class="text-muted">{{ $company->name }} - Manage deductions and statutory contributions</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.payroll-settings.index', $company) }}" class="btn btn-outline-secondary me-2">
                        <i class="bi bi-arrow-left"></i> Back to Settings
                    </a>
                    <a href="{{ route('companies.hr.payroll-settings.deductions.create', $company) }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> New Deduction
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Message -->
    @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
    
    <!-- Error Message -->
    @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

    <!-- Deductions Table -->
    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Payment Deductions Configuration</h5>
                <div class="d-flex align-items-center">
                    <div class="form-check form-switch me-3">
                        <input class="form-check-input" type="checkbox" id="showDisabled">
                        <label class="form-check-label" for="showDisabled">
                            Show disabled
                        </label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="showStatutoryOnly">
                        <label class="form-check-label" for="showStatutoryOnly">
                            Statutory only
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            @if($deductions->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Amount/Rate</th>
                                <th>Category</th>
                                <th>Statutory</th>
                                <th>Assigned to</th>
                                <th>E/F Fields</th>
                                <th>Enabled</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($deductions as $deduction)
                            <tr class="deduction-row {{ !$deduction->enabled ? 'table-secondary' : '' }} {{ $deduction->is_statutory ? 'statutory-row' : '' }}">
                                <td>
                                    <div>
                                        <strong>{{ $deduction->name }}</strong>
                                        @if($deduction->code)
                                            <span class="badge bg-secondary ms-1">{{ $deduction->code }}</span>
                                        @endif
                                        @if($deduction->is_statutory)
                                            <span class="badge bg-warning ms-2">Statutory</span>
                                        @endif
                                        @if($deduction->description)
                                            <br><small class="text-muted">{{ $deduction->description }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <span class="badge {{ $deduction->calculation_type === 'fixed' ? 'bg-primary' : ($deduction->calculation_type === 'percentage' ? 'bg-success' : 'bg-info') }}">
                                        {{ ucfirst($deduction->calculation_type ?? 'variable') }}
                                    </span>
                                </td>
                                <td>
                                    @if($deduction->calculation_type === 'fixed' && $deduction->default_amount > 0)
                                        <strong>RM{{ number_format($deduction->default_amount, 2) }}</strong>
                                    @elseif($deduction->calculation_type === 'percentage' && $deduction->default_rate > 0)
                                        <strong>{{ $deduction->default_rate }}%</strong>
                                    @elseif($deduction->calculation_type === 'table')
                                        <span class="text-info">Table-based</span>
                                    @else
                                        <span class="text-muted">Variable</span>
                                    @endif
                                </td>
                                <td>
                                    <small class="text-muted">{{ $deduction->category }}</small>
                                </td>
                                <td>
                                    @if($deduction->is_statutory)
                                        <i class="bi bi-shield-check text-warning" title="Statutory Deduction"></i>
                                    @else
                                        <i class="bi bi-shield text-muted" title="Non-statutory"></i>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge {{ $deduction->assigned_to === 'everyone' ? 'bg-primary' : 'bg-secondary' }}">
                                        {{ ucfirst($deduction->assigned_to) }}
                                    </span>
                                </td>
                                <td>
                                    @if($deduction->einvoicing_field)
                                        <span class="badge bg-info">{{ $deduction->einvoicing_field }}</span>
                                    @else
                                        <span class="text-muted">None</span>
                                    @endif
                                </td>
                                <td>
                                    @if($deduction->enabled)
                                        <span class="badge bg-success">
                                            <i class="bi bi-check-circle me-1"></i>Enabled
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="bi bi-x-circle me-1"></i>Disabled
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-info" 
                                                title="Calculate" 
                                                onclick="showCalculator({{ $deduction->id }}, '{{ $deduction->name }}', '{{ $deduction->calculation_type }}', {{ $deduction->default_amount ?? $deduction->default_rate ?? 0 }})">
                                            <i class="bi bi-calculator"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                data-bs-toggle="modal" data-bs-target="#editModal{{ $deduction->id }}">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary"
                                                onclick="toggleDeduction({{ $deduction->id }}, {{ $deduction->enabled ? 'false' : 'true' }})">
                                            @if($deduction->enabled)
                                                <i class="bi bi-eye-slash" title="Disable"></i>
                                            @else
                                                <i class="bi bi-eye" title="Enable"></i>
                                            @endif
                                        </button>
                                        @unless($deduction->is_statutory)
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                onclick="deleteDeduction({{ $deduction->id }})">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                        @endunless
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="text-muted">
                        Showing {{ $deductions->firstItem() }} to {{ $deductions->lastItem() }} of {{ $deductions->total() }} deductions
                    </div>
                    {{ $deductions->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-dash-circle fs-1 text-muted mb-3"></i>
                    <h5>No payment deductions configured</h5>
                    <p class="text-muted">Set up deductions and statutory contributions for your employees.</p>
                    <a href="{{ route('companies.hr.payroll-settings.deductions.create', $company) }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> Create First Deduction
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Malaysian Statutory Deductions Guide -->
    <div class="card mt-4">
        <div class="card-header">
            <h6 class="card-title mb-0">Malaysian Statutory Deductions</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="text-center mb-3">
                        <i class="bi bi-piggy-bank text-success fs-3 mb-2"></i>
                        <h6>EPF Employee (11%)</h6>
                        <p class="small text-muted">Employee Provident Fund contribution deducted from salary</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center mb-3">
                        <i class="bi bi-hospital text-info fs-3 mb-2"></i>
                        <h6>SOCSO Employee</h6>
                        <p class="small text-muted">Social Security contribution based on SOCSO rate table</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center mb-3">
                        <i class="bi bi-briefcase text-warning fs-3 mb-2"></i>
                        <h6>EIS Employee (0.2%)</h6>
                        <p class="small text-muted">Employment Insurance System - 0.2% of salary</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center mb-3">
                        <i class="bi bi-calculator text-primary fs-3 mb-2"></i>
                        <h6>Income Tax (MTD)</h6>
                        <p class="small text-muted">Monthly Tax Deduction based on LHDN tax table</p>
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <h6 class="text-muted">Common Voluntary Deductions:</h6>
                    <ul class="list-unstyled small">
                        <li><strong>Insurance Premium:</strong> Health/life insurance contributions</li>
                        <li><strong>Loan Repayment:</strong> Company loan or advance repayment</li>
                        <li><strong>Union Dues:</strong> Trade union membership fees</li>
                        <li><strong>Parking Fee:</strong> Company parking space rental</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h6 class="text-muted">Religious/Voluntary:</h6>
                    <ul class="list-unstyled small">
                        <li><strong>Zakat:</strong> Islamic religious contribution (2.5%)</li>
                        <li><strong>ASNB Investment:</strong> Unit trust investment scheme</li>
                        <li><strong>Cooperative Savings:</strong> Company cooperative contributions</li>
                        <li><strong>Charity Donation:</strong> Approved charitable organization donations</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Deduction Calculator Modal -->
<div class="modal fade" id="calculatorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Deduction Calculator</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Deduction Name:</label>
                    <p id="calc-deduction-name" class="fw-bold"></p>
                </div>
                <div class="mb-3">
                    <label for="calc-salary" class="form-label">Employee Salary (RM)</label>
                    <input type="number" class="form-control" id="calc-salary" placeholder="Enter salary amount" value="3000">
                </div>
                <div class="calculation-result bg-light p-3 rounded">
                    <h6>Calculation Result:</h6>
                    <div id="calc-result"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="calculateDeduction()">Calculate</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const showDisabledCheckbox = document.getElementById('showDisabled');
    const showStatutoryCheckbox = document.getElementById('showStatutoryOnly');
    
    function filterRows() {
        const rows = document.querySelectorAll('.deduction-row');
        
        rows.forEach(row => {
            let show = true;
            
            // Filter disabled rows
            if (!showDisabledCheckbox.checked && row.classList.contains('table-secondary')) {
                show = false;
            }
            
            // Filter statutory rows
            if (showStatutoryCheckbox.checked && !row.classList.contains('statutory-row')) {
                show = false;
            }
            
            row.style.display = show ? '' : 'none';
        });
    }
    
    showDisabledCheckbox.addEventListener('change', filterRows);
    showStatutoryCheckbox.addEventListener('change', filterRows);
    filterRows(); // Initial state
});

let currentDeduction = null;

function showCalculator(deductionId, name, type, rate) {
    currentDeduction = { id: deductionId, name: name, type: type, rate: rate };
    document.getElementById('calc-deduction-name').textContent = name;
    document.getElementById('calc-salary').value = '3000';
    
    const modal = new bootstrap.Modal(document.getElementById('calculatorModal'));
    modal.show();
    
    calculateDeduction();
}

function calculateDeduction() {
    if (!currentDeduction) return;
    
    const salary = parseFloat(document.getElementById('calc-salary').value) || 0;
    let deductionAmount = 0;
    let calculation = '';
    
    switch (currentDeduction.type) {
        case 'fixed':
            deductionAmount = currentDeduction.rate;
            calculation = `Fixed amount: RM${currentDeduction.rate.toFixed(2)}`;
            break;
        case 'percentage':
            deductionAmount = salary * (currentDeduction.rate / 100);
            calculation = `${currentDeduction.rate}% of RM${salary.toFixed(2)} = RM${deductionAmount.toFixed(2)}`;
            break;
        case 'formula':
            calculation = 'Formula-based calculation not implemented in preview';
            break;
    }
    
    const resultHtml = `
        <div class="row">
            <div class="col-6">Salary:</div>
            <div class="col-6"><strong>RM${salary.toFixed(2)}</strong></div>
        </div>
        <div class="row">
            <div class="col-6">Calculation:</div>
            <div class="col-6">${calculation}</div>
        </div>
        <hr>
        <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>
    `;
    
    document.getElementById('calc-result').innerHTML = resultHtml;
}

function toggleDeduction(deductionId, enable) {
    if (confirm(`Are you sure you want to ${enable ? 'enable' : 'disable'} this deduction?`)) {
        // TODO: Implement AJAX call to toggle deduction status
        console.log(`Toggle deduction ${deductionId} to ${enable}`);
    }
}

function deleteDeduction(deductionId) {
    if (confirm('Are you sure you want to delete this payment deduction? This action cannot be undone.')) {
        // Create a form and submit it
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/companies/{{ $company->id }}/hr/payroll-settings/deductions/' + deductionId;
        
        // Add CSRF token
        const csrfField = document.createElement('input');
        csrfField.type = 'hidden';
        csrfField.name = '_token';
        csrfField.value = '{{ csrf_token() }}';
        form.appendChild(csrfField);
        
        // Add DELETE method
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        form.appendChild(methodField);
        
        document.body.appendChild(form);
        form.submit();
    }
}

// Auto-calculate when salary input changes
document.addEventListener('DOMContentLoaded', function() {
    const salaryInput = document.getElementById('calc-salary');
    if (salaryInput) {
        salaryInput.addEventListener('input', calculateDeduction);
    }
});
</script>
@endpush
@endsection