@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 Additions</h1>
                    <p class="text-muted">{{ $company->name }} - Manage allowances and additional payments</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.additions.create', $company) }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> New Additional Pay
                    </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

    <!-- Payment Additions 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 Additions Configuration</h5>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="showDisabled">
                    <label class="form-check-label" for="showDisabled">
                        Show disabled
                    </label>
                </div>
            </div>
        </div>
        <div class="card-body">
            @if($additions->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>EPF</th>
                                <th>SOCSO</th>
                                <th>EIS</th>
                                <th>Tax</th>
                                <th>HRDF</th>
                                <th>Fixed</th>
                                <th>Assigned to</th>
                                <th>Default Amount</th>
                                <th>E/F/A Fields</th>
                                <th>Enabled</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($additions as $addition)
                            <tr class="addition-row {{ !$addition->enabled ? 'table-secondary' : '' }}">
                                <td>
                                    <div>
                                        <strong>{{ $addition->name }}</strong>
                                        @if($addition->code)
                                            <span class="badge bg-secondary ms-1">{{ $addition->code }}</span>
                                        @endif
                                        @if($addition->description)
                                            <br><small class="text-muted">{{ $addition->description }}</small>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    @if($addition->epf_applicable)
                                        <i class="bi bi-check-circle text-success" title="EPF Applicable"></i>
                                    @else
                                        <i class="bi bi-x-circle text-danger" title="EPF Not Applicable"></i>
                                    @endif
                                </td>
                                <td>
                                    @if($addition->socso_applicable)
                                        <i class="bi bi-check-circle text-success" title="SOCSO Applicable"></i>
                                    @else
                                        <i class="bi bi-x-circle text-danger" title="SOCSO Not Applicable"></i>
                                    @endif
                                </td>
                                <td>
                                    @if($addition->eis_applicable)
                                        <i class="bi bi-check-circle text-success" title="EIS Applicable"></i>
                                    @else
                                        <i class="bi bi-x-circle text-danger" title="EIS Not Applicable"></i>
                                    @endif
                                </td>
                                <td>
                                    @if($addition->tax_applicable)
                                        <i class="bi bi-check-circle text-success" title="Tax Applicable"></i>
                                    @else
                                        <i class="bi bi-x-circle text-danger" title="Tax Not Applicable"></i>
                                    @endif
                                </td>
                                <td>
                                    @if($addition->hrdf_applicable)
                                        <i class="bi bi-check-circle text-success" title="HRDF Applicable"></i>
                                    @else
                                        <i class="bi bi-x-circle text-danger" title="HRDF Not Applicable"></i>
                                    @endif
                                </td>
                                <td>
                                    @if($addition->is_fixed)
                                        <i class="bi bi-check-circle text-info" title="Fixed Amount"></i>
                                    @else
                                        <i class="bi bi-x-circle text-muted" title="Variable Amount"></i>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge {{ $addition->assigned_to === 'everyone' ? 'bg-primary' : 'bg-secondary' }}">
                                        {{ ucfirst($addition->assigned_to) }}
                                    </span>
                                </td>
                                <td>
                                    @if($addition->default_amount > 0)
                                        <strong>RM{{ number_format($addition->default_amount, 2) }}</strong>
                                    @elseif($addition->default_rate > 0)
                                        <strong>{{ $addition->default_rate }}%</strong>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if($addition->einvoicing_field)
                                        <span class="badge bg-info">{{ $addition->einvoicing_field }}</span>
                                    @else
                                        <span class="text-muted">None</span>
                                    @endif
                                </td>
                                <td>
                                    @if($addition->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">
                                        <a href="{{ route('companies.hr.payroll-settings.additions.edit', [$company, $addition->id]) }}" 
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-outline-secondary"
                                                onclick="toggleAddition({{ $addition->id }}, {{ $addition->enabled ? 'false' : 'true' }})">
                                            @if($addition->enabled)
                                                <i class="bi bi-eye-slash" title="Disable"></i>
                                            @else
                                                <i class="bi bi-eye" title="Enable"></i>
                                            @endif
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                onclick="deleteAddition({{ $addition->id }})">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </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 {{ $additions->firstItem() }} to {{ $additions->lastItem() }} of {{ $additions->total() }} additions
                    </div>
                    {{ $additions->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-plus-circle fs-1 text-muted mb-3"></i>
                    <h5>No payment additions configured</h5>
                    <p class="text-muted">Set up allowances and additional payments for your employees.</p>
                    <a href="{{ route('companies.hr.payroll-settings.additions.create', $company) }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> Create First Addition
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Statutory Compliance Guide -->
    <div class="card mt-4">
        <div class="card-header">
            <h6 class="card-title mb-0">Malaysian Statutory Compliance Guide</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="text-center">
                        <i class="bi bi-piggy-bank text-success fs-3 mb-2"></i>
                        <h6>EPF</h6>
                        <p class="small text-muted">Employees Provident Fund - Retirement savings scheme</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center">
                        <i class="bi bi-hospital text-info fs-3 mb-2"></i>
                        <h6>SOCSO</h6>
                        <p class="small text-muted">Social Security Organisation - Workplace protection scheme</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center">
                        <i class="bi bi-briefcase text-warning fs-3 mb-2"></i>
                        <h6>EIS</h6>
                        <p class="small text-muted">Employment Insurance System - Job loss protection</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-center">
                        <i class="bi bi-calculator text-primary fs-3 mb-2"></i>
                        <h6>Tax</h6>
                        <p class="small text-muted">Income tax deduction - LHDN compliance</p>
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-12">
                    <h6 class="text-muted">Common Addition Types:</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <ul class="list-unstyled small">
                                <li><strong>Transport Allowance:</strong> Usually not subject to EPF/SOCSO</li>
                                <li><strong>Meal Allowance:</strong> May be subject to tax if exceeding RM1,000/month</li>
                                <li><strong>Phone Allowance:</strong> Generally subject to tax</li>
                                <li><strong>Parking Allowance:</strong> Usually not subject to statutory contributions</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled small">
                                <li><strong>Commission:</strong> Subject to all statutory contributions</li>
                                <li><strong>Bonus:</strong> Subject to EPF, may be subject to tax</li>
                                <li><strong>Overtime:</strong> Subject to all statutory contributions</li>
                                <li><strong>Childcare:</strong> May be tax-exempt up to certain limits</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const showDisabledCheckbox = document.getElementById('showDisabled');
    
    function toggleDisabledRows() {
        const disabledRows = document.querySelectorAll('.addition-row.table-secondary');
        disabledRows.forEach(row => {
            if (showDisabledCheckbox.checked) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }
    
    showDisabledCheckbox.addEventListener('change', toggleDisabledRows);
    toggleDisabledRows(); // Initial state
});

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

function deleteAddition(additionId) {
    if (confirm('Are you sure you want to delete this payment addition? 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/additions/' + additionId;
        
        // 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();
    }
}
</script>
@endpush
@endsection