@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 Additional Pay</h1>
                    <p class="text-muted">{{ $company->name }} - Create allowance or additional payment</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.payroll-settings.additions', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Additions
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Addition Form -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Additional Payment 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.additions.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., Transport Allowance" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">E/F/A Fields</label>
                                <input type="text" class="form-control @error('ef_fields') is-invalid @enderror" 
                                       name="ef_fields" value="{{ old('ef_fields') }}" 
                                       placeholder="e.g., B1C" 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 additional payment...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Statutory Compliance -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Malaysian Statutory Compliance</h6>
                                <p class="small text-info">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Select which statutory contributions apply to this additional payment
                                </p>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="epf_applicable" 
                                                   id="epf_applicable" value="1" 
                                                   {{ old('epf_applicable') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="epf_applicable">
                                                <i class="bi bi-piggy-bank text-success me-1"></i>
                                                <strong>EPF</strong>
                                            </label>
                                        </div>
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="socso_applicable" 
                                                   id="socso_applicable" value="1" 
                                                   {{ old('socso_applicable') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="socso_applicable">
                                                <i class="bi bi-hospital text-info me-1"></i>
                                                <strong>SOCSO</strong>
                                            </label>
                                        </div>
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="eis_applicable" 
                                                   id="eis_applicable" value="1" 
                                                   {{ old('eis_applicable') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="eis_applicable">
                                                <i class="bi bi-briefcase text-warning me-1"></i>
                                                <strong>EIS</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="tax_applicable" 
                                                   id="tax_applicable" value="1" 
                                                   {{ old('tax_applicable') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="tax_applicable">
                                                <i class="bi bi-calculator text-primary me-1"></i>
                                                <strong>Tax</strong>
                                            </label>
                                        </div>
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="hrdf_applicable" 
                                                   id="hrdf_applicable" value="1" 
                                                   {{ old('hrdf_applicable') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="hrdf_applicable">
                                                <i class="bi bi-graph-up text-secondary me-1"></i>
                                                <strong>HRDF</strong>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card bg-light">
                                    <div class="card-body p-3">
                                        <h6 class="small">Quick Guidelines:</h6>
                                        <ul class="small mb-0">
                                            <li><strong>Transport/Parking:</strong> Usually no statutory contributions</li>
                                            <li><strong>Commission/Bonus:</strong> All contributions apply</li>
                                            <li><strong>Meal allowance:</strong> Tax applies if >RM1,000/month</li>
                                            <li><strong>Childcare:</strong> May be tax-exempt (check limits)</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Amount Configuration -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Amount Configuration</h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="is_fixed_amount" 
                                           id="is_fixed_amount" value="1" 
                                           {{ old('is_fixed_amount') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_fixed_amount">
                                        <strong>Fixed amount</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Check if this is a fixed amount for all employees</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Default Amount <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" min="0" 
                                           class="form-control @error('default_amount') is-invalid @enderror" 
                                           name="default_amount" value="{{ old('default_amount', '0.00') }}" 
                                           placeholder="0.00" required>
                                    @error('default_amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Default amount or starting value</small>
                            </div>
                        </div>

                        <!-- Assignment -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Assignment</h6>
                            </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 addition applies to</small>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mt-4">
                                    <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 addition</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Addition will be available for payroll processing</small>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <a href="{{ route('companies.hr.payroll-settings.additions', $company) }}" 
                               class="btn btn-secondary me-2">Cancel</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle"></i> Create Addition
                            </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">Quick Templates</h6>
                </div>
                <div class="card-body">
                    <p class="small text-muted">Click to auto-fill common allowance types:</p>
                    
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary btn-sm template-btn" 
                                data-template="transport">
                            <i class="bi bi-car-front me-1"></i> Transport Allowance
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm template-btn" 
                                data-template="meal">
                            <i class="bi bi-cup-hot me-1"></i> Meal Allowance
                        </button>
                        <button type="button" class="btn btn-outline-info btn-sm template-btn" 
                                data-template="phone">
                            <i class="bi bi-phone me-1"></i> Phone Allowance
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm template-btn" 
                                data-template="parking">
                            <i class="bi bi-p-square me-1"></i> Parking Allowance
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm template-btn" 
                                data-template="commission">
                            <i class="bi bi-percent me-1"></i> Commission
                        </button>
                        <button type="button" class="btn btn-outline-dark btn-sm template-btn" 
                                data-template="bonus">
                            <i class="bi bi-gift me-1"></i> Performance Bonus
                        </button>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Compliance Notes</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong class="text-success">Tax-Exempt Allowances:</strong>
                        <ul class="small mt-2">
                            <li>Meal: Up to RM1,000/month</li>
                            <li>Childcare: Up to RM2,400/year</li>
                            <li>Medical: Actual expenses</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <strong class="text-warning">Fully Taxable:</strong>
                        <ul class="small mt-2">
                            <li>Commission and bonuses</li>
                            <li>Phone allowance</li>
                            <li>Overtime payments</li>
                        </ul>
                    </div>
                    
                    <div>
                        <strong class="text-info">Usually EPF/SOCSO Exempt:</strong>
                        <ul class="small mt-2">
                            <li>Transport allowance</li>
                            <li>Parking allowance</li>
                            <li>Uniform allowance</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const templates = {
        transport: {
            name: 'Transport Allowance',
            description: 'Monthly transport allowance for employees',
            default_amount: '200.00',
            ef_fields: 'F',
            epf_applicable: false,
            socso_applicable: false,
            eis_applicable: false,
            tax_applicable: false,
            hrdf_applicable: false,
            is_fixed_amount: true
        },
        meal: {
            name: 'Meal Allowance',
            description: 'Daily meal allowance (tax-exempt up to RM1,000/month)',
            default_amount: '800.00',
            ef_fields: 'F',
            epf_applicable: false,
            socso_applicable: false,
            eis_applicable: false,
            tax_applicable: false,
            hrdf_applicable: false,
            is_fixed_amount: true
        },
        phone: {
            name: 'Phone Allowance',
            description: 'Monthly mobile phone allowance',
            default_amount: '100.00',
            ef_fields: 'B1C',
            epf_applicable: true,
            socso_applicable: true,
            eis_applicable: true,
            tax_applicable: true,
            hrdf_applicable: true,
            is_fixed_amount: true
        },
        parking: {
            name: 'Parking Allowance',
            description: 'Monthly parking allowance',
            default_amount: '150.00',
            ef_fields: 'F',
            epf_applicable: false,
            socso_applicable: false,
            eis_applicable: false,
            tax_applicable: false,
            hrdf_applicable: false,
            is_fixed_amount: true
        },
        commission: {
            name: 'Commission',
            description: 'Sales commission based on performance',
            default_amount: '0.00',
            ef_fields: 'B1C',
            epf_applicable: true,
            socso_applicable: true,
            eis_applicable: true,
            tax_applicable: true,
            hrdf_applicable: true,
            is_fixed_amount: false
        },
        bonus: {
            name: 'Performance Bonus',
            description: 'Performance-based bonus payment',
            default_amount: '0.00',
            ef_fields: 'B1C',
            epf_applicable: true,
            socso_applicable: false,
            eis_applicable: false,
            tax_applicable: true,
            hrdf_applicable: false,
            is_fixed_amount: false
        }
    };
    
    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('input[name="default_amount"]').value = template.default_amount;
                document.querySelector('input[name="ef_fields"]').value = template.ef_fields;
                
                // Set checkboxes
                document.querySelector('input[name="epf_applicable"]').checked = template.epf_applicable;
                document.querySelector('input[name="socso_applicable"]').checked = template.socso_applicable;
                document.querySelector('input[name="eis_applicable"]').checked = template.eis_applicable;
                document.querySelector('input[name="tax_applicable"]').checked = template.tax_applicable;
                document.querySelector('input[name="hrdf_applicable"]').checked = template.hrdf_applicable;
                document.querySelector('input[name="is_fixed_amount"]').checked = template.is_fixed_amount;
                
                // Highlight the form
                document.querySelector('.card').scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
});
</script>
@endpush
@endsection