@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">Process Payroll</h1>
                    <p class="text-muted">{{ $company->name }} - Create New Payroll</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.payroll-settings.additions', $company) }}" class="btn btn-outline-info me-2">
                        <i class="bi bi-gear"></i> Manage Types
                    </a>
                    <a href="{{ route('companies.hr.payroll.index', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Payroll
                    </a>
                </div>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('companies.hr.payroll.store', $company) }}" id="payrollForm">
        @csrf
        <div class="row">
            <!-- Left Column - Main Form -->
            <div class="col-lg-8">
                <!-- Payroll Template Settings -->
                <div class="card mb-4" style="background-color: #f8f9fa; border: 2px solid #dee2e6;">
                    <div class="card-header bg-info text-white">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-lightning-fill"></i> Quick Payroll Templates
                        </h5>
                        <small>Select a template to auto-fill standard compensation packages</small>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="payroll_template" id="template_none" value="none" checked>
                                    <label class="btn btn-outline-secondary" for="template_none">
                                        <i class="bi bi-x-circle"></i><br>No Template
                                    </label>
                                    
                                    <input type="radio" class="btn-check" name="payroll_template" id="template_fulltime" value="fulltime">
                                    <label class="btn btn-outline-primary" for="template_fulltime">
                                        <i class="bi bi-briefcase-fill"></i><br>Full-Time
                                    </label>
                                    
                                    <input type="radio" class="btn-check" name="payroll_template" id="template_parttime" value="parttime">
                                    <label class="btn btn-outline-warning" for="template_parttime">
                                        <i class="bi bi-clock-history"></i><br>Part-Time
                                    </label>
                                    
                                    <input type="radio" class="btn-check" name="payroll_template" id="template_contract" value="contract">
                                    <label class="btn btn-outline-success" for="template_contract">
                                        <i class="bi bi-file-earmark-text"></i><br>Contract
                                    </label>
                                    
                                    <input type="radio" class="btn-check" name="payroll_template" id="template_intern" value="intern">
                                    <label class="btn btn-outline-info" for="template_intern">
                                        <i class="bi bi-person-badge"></i><br>Intern
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Template Details -->
                        <div id="templateDetails" class="alert alert-light border" style="display: none;">
                            <h6 class="alert-heading" id="templateTitle">Select a template</h6>
                            <div id="templateDescription"></div>
                            <hr>
                            <div id="templateIncludes" class="small"></div>
                        </div>
                        
                        <!-- Template Presets (Hidden) -->
                        <div id="templatePresets" style="display: none;">
                            <div data-template="fulltime">
                                <div data-field="title">Full-Time Employee Template</div>
                                <div data-field="description">Standard package for permanent full-time employees with complete benefits</div>
                                <div data-field="includes">
                                    • Full EPF contribution (11% employee, 12-13% employer)<br>
                                    • SOCSO & EIS coverage<br>
                                    • Income tax deduction<br>
                                    • Eligible for overtime pay<br>
                                    • Annual & sick leave entitlement
                                </div>
                                <div data-field="base_salary">5000</div>
                                <div data-field="epf_enabled">true</div>
                                <div data-field="socso_enabled">true</div>
                                <div data-field="eis_enabled">true</div>
                                <div data-field="tax_enabled">true</div>
                                <div data-field="ot_eligible">true</div>
                            </div>
                            
                            <div data-template="parttime">
                                <div data-field="title">Part-Time Employee Template</div>
                                <div data-field="description">Flexible package for part-time workers with pro-rated benefits</div>
                                <div data-field="includes">
                                    • Pro-rated EPF contribution<br>
                                    • SOCSO coverage (if eligible)<br>
                                    • Hourly/daily wage calculation<br>
                                    • Pro-rated leave entitlement
                                </div>
                                <div data-field="base_salary">2000</div>
                                <div data-field="salary_type">Hourly</div>
                                <div data-field="epf_enabled">true</div>
                                <div data-field="socso_enabled">true</div>
                                <div data-field="eis_enabled">false</div>
                                <div data-field="tax_enabled">false</div>
                                <div data-field="ot_eligible">false</div>
                            </div>
                            
                            <div data-template="contract">
                                <div data-field="title">Contract Employee Template</div>
                                <div data-field="description">Fixed-term contract with specified compensation</div>
                                <div data-field="includes">
                                    • Fixed contract rate<br>
                                    • Optional EPF (by agreement)<br>
                                    • No overtime eligibility<br>
                                    • Contract-specific allowances<br>
                                    • Service tax may apply
                                </div>
                                <div data-field="base_salary">6000</div>
                                <div data-field="epf_enabled">false</div>
                                <div data-field="socso_enabled">false</div>
                                <div data-field="eis_enabled">false</div>
                                <div data-field="tax_enabled">true</div>
                                <div data-field="ot_eligible">false</div>
                            </div>
                            
                            <div data-template="intern">
                                <div data-field="title">Intern/Trainee Template</div>
                                <div data-field="description">Training allowance for interns and industrial trainees</div>
                                <div data-field="includes">
                                    • Monthly allowance/stipend<br>
                                    • Optional SOCSO coverage<br>
                                    • No EPF requirement<br>
                                    • Training-related benefits<br>
                                    • Meal/transport allowance
                                </div>
                                <div data-field="base_salary">1200</div>
                                <div data-field="epf_enabled">false</div>
                                <div data-field="socso_enabled">true</div>
                                <div data-field="eis_enabled">false</div>
                                <div data-field="tax_enabled">false</div>
                                <div data-field="ot_eligible">false</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Employee & Period Selection -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Employee & Period Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Employee <span class="text-danger">*</span></label>
                                <select class="form-select @error('employee_id') is-invalid @enderror" 
                                        name="employee_id" id="employeeSelect" required>
                                    <option value="">Select Employee</option>
                                    @foreach($employees as $employee)
                                        @php
                                            $isProcessed = in_array($employee->id, $processedEmployeeIds);
                                        @endphp
                                        <option value="{{ $employee->id }}" 
                                                data-salary="{{ $employee->salary ?: 0 }}"
                                                data-employee-id="{{ $employee->employee_id }}"
                                                data-department="{{ $employee->department ?: 'N/A' }}"
                                                data-position="{{ $employee->position ?: 'N/A' }}"
                                                data-employment-type="{{ $employee->employment_type ?: 'full_time' }}"
                                                data-employee-data="{{ json_encode([
                                                    'pay_epf' => $employee->pay_epf,
                                                    'pay_socso' => $employee->pay_socso,
                                                    'pay_tax' => $employee->pay_tax,
                                                    'employee_epf_rate' => $employee->employee_epf_rate,
                                                    'employment_type' => $employee->employment_type
                                                ]) }}"
                                                {{ $isProcessed ? 'disabled' : '' }}
                                                {{ old('employee_id') == $employee->id ? 'selected' : '' }}
                                                style="{{ $isProcessed ? 'color: #6c757d; background-color: #f8f9fa;' : '' }}">
                                            {{ $employee->full_name ?? $employee->first_name . ' ' . $employee->last_name }} ({{ $employee->employee_id }})
                                            {{ $isProcessed ? ' - Payroll Already Processed' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('employee_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @if(count($processedEmployeeIds) > 0)
                                    <div class="alert alert-info mt-2" style="font-size: 0.875rem;">
                                        <i class="bi bi-info-circle me-1"></i>
                                        <strong>{{ count($processedEmployeeIds) }}</strong> employee(s) already have payroll processed for <strong>{{ $currentPeriod }}</strong> and are disabled to prevent duplicate processing.
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Year <span class="text-danger">*</span></label>
                                <select class="form-select @error('payroll_period') is-invalid @enderror" 
                                        name="year" id="yearSelect" required>
                                    @php
                                        $currentYear = date('Y');
                                        $years = range($currentYear - 1, $currentYear + 1);
                                    @endphp
                                    @foreach($years as $year)
                                        <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>{{ $year }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Month <span class="text-danger">*</span></label>
                                <select class="form-select @error('month') is-invalid @enderror" 
                                        name="month" id="monthSelect" required>
                                    @php
                                        $months = [
                                            'January', 'February', 'March', 'April', 'May', 'June',
                                            'July', 'August', 'September', 'October', 'November', 'December'
                                        ];
                                        $currentMonth = date('F');
                                    @endphp
                                    @foreach($months as $month)
                                        <option value="{{ $month }}" {{ $month == $currentMonth ? 'selected' : '' }}>{{ $month }}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" name="payroll_period" id="payrollPeriod" value="{{ $currentMonth . ' ' . date('Y') }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Worked (months) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('worked_months') is-invalid @enderror" 
                                       name="worked_months" id="workedMonths" value="{{ old('worked_months', 1) }}" 
                                       min="0" max="12" step="0.1" required>
                                @error('worked_months')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Pay Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('pay_date') is-invalid @enderror" 
                                       name="pay_date" value="{{ old('pay_date', date('Y-m-d')) }}" required>
                                @error('pay_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Period Start <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('period_start') is-invalid @enderror" 
                                       name="period_start" value="{{ old('period_start', date('Y-m-01')) }}" required>
                                @error('period_start')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Period End <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('period_end') is-invalid @enderror" 
                                       name="period_end" value="{{ old('period_end', date('Y-m-t')) }}" required>
                                @error('period_end')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Basic Earnings -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Basic earnings</h5>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="includeInPayroll" checked>
                            <label class="form-check-label" for="includeInPayroll">
                                Include in payroll
                            </label>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Salary Type</label>
                                <select class="form-select" name="salary_type" id="salaryType">
                                    <option value="Monthly">Monthly</option>
                                    <option value="Daily">Daily</option>
                                    <option value="Hourly">Hourly</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Full amount (RM) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" step="0.01" class="form-control @error('base_salary') is-invalid @enderror" 
                                           name="base_salary" id="baseSalary" value="{{ old('base_salary', 5000) }}" 
                                           placeholder="5,000.00" required>
                                </div>
                                @error('base_salary')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Earnings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Additional earnings</h5>
                        <div class="text-muted small">All configured earnings are displayed below. Enter amounts as needed.</div>
                    </div>
                    <div class="card-body">
                        <!-- Expense Claims Section -->
                        <div class="expense-claims-section mb-4">
                            <h6 class="mb-3">
                                <i class="bi bi-receipt"></i> Expense Claims Reimbursement
                                <span class="badge bg-info ms-2" id="claimsCount">0 claims</span>
                            </h6>
                            <div id="expenseClaimsContainer">
                                <div class="alert alert-warning" id="noClaimsMessage">
                                    <i class="bi bi-info-circle"></i> No approved expense claims found for this employee in the current period.
                                </div>
                                <div id="claimsDetails" style="display: none;">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <div class="row align-items-center">
                                                <div class="col-md-6">
                                                    <label class="form-label">Total Approved Claims</label>
                                                    <div class="text-muted small">Automatically added to gross pay</div>
                                                </div>
                                                <div class="col-md-4">
                                                    <input type="number" class="form-control" id="expenseClaimsAmount" 
                                                           name="expense_claims_amount" readonly>
                                                    <input type="hidden" id="expenseClaimsData" name="expense_claims_data">
                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button" class="btn btn-sm btn-outline-info" 
                                                            data-bs-toggle="modal" data-bs-target="#claimsModal">
                                                        <i class="bi bi-eye"></i> View
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <div id="additionalEarnings">
                            <!-- Pre-populate all configured addition types -->
                            @foreach($additionTypes->values() as $index => $type)
                                <div class="line-item mb-3" data-type="addition" data-index="{{ $index }}">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label class="form-label small">{{ $type->name }}</label>
                                            <input type="hidden" name="line_items[{{ $index }}][type_id]" value="{{ $type->id }}">
                                            <div class="text-muted small">{{ $type->description }}</div>
                                        </div>
                                        <div class="col-md-5">
                                            <input type="number" class="form-control line-item-amount" 
                                                   name="line_items[{{ $index }}][amount]" 
                                                   id="addition_{{ $type->id }}_amount"
                                                   placeholder="0.00" step="0.01" min="0"
                                                   value="{{ old('line_items.' . $index . '.amount', 0) }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-sm btn-outline-secondary clear-amount-btn" 
                                                    onclick="clearAmount(this)">
                                                <i class="bi bi-x"></i> Clear
                                            </button>
                                        </div>
                                    </div>
                                    <input type="hidden" name="line_items[{{ $index }}][notes]" 
                                           value="{{ $type->is_statutory ? 'Auto-populated' : 'Manual entry' }}">
                                </div>
                            @endforeach
                        </div>
                        @if($additionTypes->isEmpty())
                            <div class="text-muted" id="noAdditionsMessage">
                                <i class="bi bi-info-circle"></i> No additional earnings configured. 
                                <a href="{{ route('companies.hr.payroll-settings.additions', $company) }}">Configure addition types</a>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Deductions -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Deductions</h5>
                        <div class="text-muted small">All configured deductions are displayed below. Enter amounts as needed.</div>
                    </div>
                    <div class="card-body">
                        <div id="deductionsContainer">
                            <!-- Pre-populate all configured deduction types (non-statutory) -->
                            @php
                                $deductionStartIndex = $additionTypes->count();
                                $nonStatutoryDeductions = $deductionTypes->where('is_statutory', false)->values();
                            @endphp
                            @foreach($nonStatutoryDeductions as $index => $type)
                                @php
                                    $actualIndex = $deductionStartIndex + $index;
                                @endphp
                                <div class="line-item mb-3" data-type="deduction" data-index="{{ $actualIndex }}">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label class="form-label small">{{ $type->name }}</label>
                                            <input type="hidden" name="line_items[{{ $actualIndex }}][type_id]" value="{{ $type->id }}">
                                            <div class="text-muted small">{{ $type->description }}</div>
                                        </div>
                                        <div class="col-md-5">
                                            <input type="number" class="form-control line-item-amount" 
                                                   name="line_items[{{ $actualIndex }}][amount]" 
                                                   id="deduction_{{ $type->id }}_amount"
                                                   placeholder="0.00" step="0.01" min="0"
                                                   value="{{ old('line_items.' . $actualIndex . '.amount', 0) }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-sm btn-outline-secondary clear-amount-btn" 
                                                    onclick="clearAmount(this)">
                                                <i class="bi bi-x"></i> Clear
                                            </button>
                                        </div>
                                    </div>
                                    <input type="hidden" name="line_items[{{ $actualIndex }}][notes]" 
                                           value="Manual entry">
                                </div>
                            @endforeach
                        </div>
                        <div class="alert alert-info small mt-3">
                            <i class="bi bi-info-circle"></i> <strong>Note:</strong> Statutory deductions (EPF, SOCSO, EIS, Income Tax) will be automatically calculated based on employee settings and gross pay.
                        </div>
                    </div>
                </div>

                <!-- Notes -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Notes</h5>
                    </div>
                    <div class="card-body">
                        <textarea class="form-control @error('notes') is-invalid @enderror" 
                                  name="notes" rows="3" 
                                  placeholder="Any additional notes about this payroll...">{{ old('notes') }}</textarea>
                        @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Right Column - Payroll Summary -->
            <div class="col-lg-4">
                <!-- Employee Info -->
                <div class="card mb-4" id="employeeInfoCard" style="display: none;">
                    <div class="card-header">
                        <h6 class="card-title mb-0">Employee: <span id="selectedEmployeeName">-</span></h6>
                    </div>
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-6">Employee ID:</div>
                            <div class="col-6 text-end" id="employeeIdDisplay">-</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6">Department:</div>
                            <div class="col-6 text-end" id="employeeDepartment">-</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6">Position:</div>
                            <div class="col-6 text-end" id="employeePosition">-</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6">Type:</div>
                            <div class="col-6 text-end">
                                <span id="employeeTypeDisplay" class="badge">-</span>
                            </div>
                        </div>
                        <div class="alert alert-info py-2 mt-3" id="templateAutoApplied" style="display: none;">
                            <small><i class="bi bi-info-circle"></i> Template automatically applied based on employee type</small>
                        </div>
                    </div>
                </div>

                <!-- Pay Summary -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="card-title mb-0">Pay amount</h6>
                    </div>
                    <div class="card-body">
                        <!-- Basic Pay -->
                        <div class="row mb-2">
                            <div class="col-7">Basic Pay</div>
                            <div class="col-5 text-end">
                                <span id="basicPayDisplay">RM 5,000.00</span>
                            </div>
                        </div>
                        
                        <!-- Additional Earnings -->
                        <div id="additionalEarningsDisplay" style="display: none;">
                            <div class="text-muted small mb-1">Additional earnings</div>
                        </div>
                        
                        <!-- Gross Pay -->
                        <hr>
                        <div class="row mb-2">
                            <div class="col-7"><strong>Gross Pay</strong></div>
                            <div class="col-5 text-end">
                                <strong id="grossPayDisplay">RM 5,000.00</strong>
                            </div>
                        </div>
                        
                        <!-- Deductions -->
                        <div id="deductionsDisplay">
                            <div class="text-muted small mb-1">Deductions</div>
                        </div>
                        
                        <!-- Net Pay -->
                        <hr>
                        <div class="row mb-2">
                            <div class="col-7"><strong>Net pay</strong></div>
                            <div class="col-5 text-end">
                                <strong id="netPayDisplay" class="text-success">RM 4,325.30</strong>
                            </div>
                        </div>
                        
                        <!-- Company Contribution -->
                        <hr>
                        <div class="row mb-2">
                            <div class="col-7">Company contribution</div>
                            <div class="col-5 text-end">
                                <span id="companyContributionDisplay">RM 650.00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary" name="action" value="save">
                                <i class="bi bi-calculator"></i> Process Payroll
                            </button>
                            <button type="submit" class="btn btn-outline-primary" name="action" value="draft">
                                <i class="bi bi-file-earmark"></i> Save as Draft
                            </button>
                            <a href="{{ route('companies.hr.payroll.index', $company) }}" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Report Button -->
                <div class="card mt-3">
                    <div class="card-body text-center">
                        <button type="button" class="btn btn-info" onclick="window.open('#', '_blank')">
                            <i class="bi bi-file-text"></i> VIEW REPORT
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Expense Claims Modal -->
<div class="modal fade" id="claimsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Approved Expense Claims</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="claimsModalContent">
                    <p class="text-muted">Loading claims...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Add Addition Modal -->
<div class="modal fade" id="addAdditionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Additional Earning</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addAdditionForm">
                    <div class="mb-3">
                        <label class="form-label">Addition Type <span class="text-danger">*</span></label>
                        <select class="form-select" id="additionTypeSelect" required>
                            <option value="">Select addition type</option>
                            @foreach($additionTypes as $type)
                                <option value="{{ $type->id }}" data-default-amount="{{ $type->default_amount }}">
                                    {{ $type->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Amount (RM) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">RM</span>
                            <input type="number" step="0.01" class="form-control" id="additionAmount" 
                                   placeholder="0.00" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <input type="text" class="form-control" id="additionNotes" 
                               placeholder="Optional notes">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmAddAddition">Add</button>
            </div>
        </div>
    </div>
</div>

<!-- Add Deduction Modal -->
<div class="modal fade" id="addDeductionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Deduction</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addDeductionForm">
                    <div class="mb-3">
                        <label class="form-label">Deduction Type <span class="text-danger">*</span></label>
                        <select class="form-select" id="deductionTypeSelect" required>
                            <option value="">Select deduction type</option>
                            @foreach($deductionTypes as $type)
                                @if($type->category === 'custom')
                                    <option value="{{ $type->id }}" data-default-amount="{{ $type->default_amount }}">
                                        {{ $type->name }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Amount (RM) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">RM</span>
                            <input type="number" step="0.01" class="form-control" id="deductionAmount" 
                                   placeholder="0.00" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <input type="text" class="form-control" id="deductionNotes" 
                               placeholder="Optional notes">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmAddDeduction">Add</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let lineItemCounter = 0;
    let additionTypes = @json($additionTypes);
    let deductionTypes = @json($deductionTypes);
    let employeeClaims = @json($employeeClaims);
    
    // Modal instances
    const addAdditionModal = new bootstrap.Modal(document.getElementById('addAdditionModal'));
    const addDeductionModal = new bootstrap.Modal(document.getElementById('addDeductionModal'));
    
    // Elements
    const employeeSelect = document.getElementById('employeeSelect');
    const yearSelect = document.getElementById('yearSelect');
    const monthSelect = document.getElementById('monthSelect');
    const baseSalaryInput = document.getElementById('baseSalary');
    const workedMonthsInput = document.getElementById('workedMonths');
    const salaryTypeSelect = document.getElementById('salaryType');
    
    // Template handling
    const templateRadios = document.querySelectorAll('input[name="payroll_template"]');
    const templateDetails = document.getElementById('templateDetails');
    const templateTitle = document.getElementById('templateTitle');
    const templateDescription = document.getElementById('templateDescription');
    const templateIncludes = document.getElementById('templateIncludes');
    
    // Handle template selection
    templateRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.value === 'none') {
                templateDetails.style.display = 'none';
                return;
            }
            
            // Show template details
            templateDetails.style.display = 'block';
            
            // Get template data
            const templateData = document.querySelector(`[data-template="${this.value}"]`);
            if (templateData) {
                const title = templateData.querySelector('[data-field="title"]').textContent;
                const description = templateData.querySelector('[data-field="description"]').textContent;
                const includes = templateData.querySelector('[data-field="includes"]').innerHTML;
                const baseSalary = templateData.querySelector('[data-field="base_salary"]').textContent;
                const salaryType = templateData.querySelector('[data-field="salary_type"]');
                
                // Update template details display
                templateTitle.textContent = title;
                templateDescription.textContent = description;
                templateIncludes.innerHTML = includes;
                
                // Auto-fill form fields
                baseSalaryInput.value = baseSalary;
                if (salaryType) {
                    salaryTypeSelect.value = salaryType.textContent;
                } else {
                    salaryTypeSelect.value = 'Monthly';
                }
                
                // Apply template-specific settings
                applyTemplateSettings(this.value);
                
                // Show confirmation
                showTemplateAppliedNotification(title);
                
                // Recalculate payroll
                calculatePayroll();
            }
        });
    });
    
    // Apply template-specific settings
    function applyTemplateSettings(templateType) {
        // Clear existing additional earnings and deductions
        const additionsToKeep = document.querySelectorAll('#additionalEarnings .line-item');
        const deductionsToKeep = document.querySelectorAll('#deductionsContainer .line-item');
        
        // Set amounts based on template
        switch(templateType) {
            case 'fulltime':
                // Set standard full-time additions if available
                setAdditionAmount('Overtime', 500);
                setAdditionAmount('Allowance', 300);
                break;
                
            case 'parttime':
                // Set part-time specific amounts
                workedMonthsInput.value = 0.5; // Default to half month
                setAdditionAmount('Transport', 100);
                break;
                
            case 'contract':
                // Set contract-specific additions
                setAdditionAmount('Project Bonus', 1000);
                setAdditionAmount('Allowance', 500);
                break;
                
            case 'intern':
                // Set intern allowances
                setAdditionAmount('Meal Allowance', 200);
                setAdditionAmount('Transport', 150);
                break;
        }
    }
    
    // Helper function to set addition amounts
    function setAdditionAmount(typeName, amount) {
        const additions = document.querySelectorAll('#additionalEarnings .line-item');
        additions.forEach(item => {
            const label = item.querySelector('label');
            if (label && label.textContent.includes(typeName)) {
                const input = item.querySelector('.line-item-amount');
                if (input) {
                    input.value = amount;
                }
            }
        });
    }
    
    // Show template applied notification
    function showTemplateAppliedNotification(templateName) {
        // Create toast notification
        const toast = document.createElement('div');
        toast.className = 'position-fixed top-0 end-0 p-3';
        toast.style.zIndex = '11';
        toast.innerHTML = `
            <div class="toast show" role="alert">
                <div class="toast-header bg-success text-white">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    <strong class="me-auto">Template Applied</strong>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    ${templateName} has been applied. You can still modify any values as needed.
                </div>
            </div>
        `;
        document.body.appendChild(toast);
        
        // Auto-remove after 3 seconds
        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
    
    // Update payroll period when year/month changes
    function updatePayrollPeriod() {
        const year = yearSelect.value;
        const month = monthSelect.value;
        document.getElementById('payrollPeriod').value = month + ' ' + year;
    }
    
    yearSelect.addEventListener('change', updatePayrollPeriod);
    monthSelect.addEventListener('change', updatePayrollPeriod);
    
    // Employee selection handler
    employeeSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            const salary = selectedOption.dataset.salary;
            const employeeId = selectedOption.dataset.employeeId;
            const department = selectedOption.dataset.department;
            const position = selectedOption.dataset.position;
            const employmentType = selectedOption.dataset.employmentType || 'full_time';
            
            baseSalaryInput.value = salary;
            
            // Show employee info
            document.getElementById('employeeInfoCard').style.display = 'block';
            document.getElementById('selectedEmployeeName').textContent = selectedOption.text.split(' (')[0];
            
            // Update employee details
            document.getElementById('employeeIdDisplay').textContent = employeeId || '-';
            document.getElementById('employeeDepartment').textContent = department || '-';
            document.getElementById('employeePosition').textContent = position || '-';
            
            // Update employment type badge
            updateEmploymentTypeBadge(employmentType);
            
            // Auto-select the appropriate template based on employment type
            autoSelectTemplate(employmentType);
            
            // Show template auto-applied message
            document.getElementById('templateAutoApplied').style.display = 'block';
            
            // Handle expense claims for this employee
            handleExpenseClaims(this.value);
            
            calculatePayroll();
        } else {
            document.getElementById('employeeInfoCard').style.display = 'none';
            // Reset template to none when no employee is selected
            document.getElementById('template_none').checked = true;
            templateDetails.style.display = 'none';
        }
    });
    
    // Auto-select template based on employment type
    function autoSelectTemplate(employmentType) {
        let templateToSelect = 'none';
        
        // Map employment types to templates
        switch(employmentType) {
            case 'full_time':
                templateToSelect = 'fulltime';
                break;
            case 'part_time':
                templateToSelect = 'parttime';
                break;
            case 'contract':
                templateToSelect = 'contract';
                break;
            case 'intern':
            case 'internship':
                templateToSelect = 'intern';
                break;
            default:
                templateToSelect = 'fulltime'; // Default to full-time
        }
        
        // Select the appropriate template radio button
        const templateRadio = document.getElementById(`template_${templateToSelect}`);
        if (templateRadio) {
            templateRadio.checked = true;
            // Trigger the change event to apply the template
            templateRadio.dispatchEvent(new Event('change'));
            
            // Add visual highlight to show automatic selection
            highlightAutoSelectedTemplate(templateToSelect);
        }
    }
    
    // Highlight the auto-selected template
    function highlightAutoSelectedTemplate(templateType) {
        // Remove any existing highlights
        document.querySelectorAll('.btn-check + label').forEach(label => {
            label.classList.remove('border-primary', 'border-3');
        });
        
        // Add highlight to the selected template
        const selectedLabel = document.querySelector(`#template_${templateType} + label`);
        if (selectedLabel) {
            selectedLabel.classList.add('border-primary', 'border-3');
            
            // Add a small badge to show it was auto-selected
            if (!selectedLabel.querySelector('.auto-selected-badge')) {
                const badge = document.createElement('span');
                badge.className = 'position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary auto-selected-badge';
                badge.textContent = 'Auto';
                badge.style.fontSize = '0.7rem';
                selectedLabel.style.position = 'relative';
                selectedLabel.appendChild(badge);
            }
        }
    }
    
    // Update employment type badge
    function updateEmploymentTypeBadge(employmentType) {
        const typeDisplay = document.getElementById('employeeTypeDisplay');
        
        // Reset classes
        typeDisplay.className = 'badge';
        
        // Set badge based on employment type
        switch(employmentType) {
            case 'full_time':
                typeDisplay.textContent = 'Full-Time';
                typeDisplay.classList.add('bg-primary');
                break;
            case 'part_time':
                typeDisplay.textContent = 'Part-Time';
                typeDisplay.classList.add('bg-warning');
                break;
            case 'contract':
                typeDisplay.textContent = 'Contract';
                typeDisplay.classList.add('bg-success');
                break;
            case 'intern':
            case 'internship':
                typeDisplay.textContent = 'Intern';
                typeDisplay.classList.add('bg-info');
                break;
            default:
                typeDisplay.textContent = 'Unknown';
                typeDisplay.classList.add('bg-secondary');
        }
    }
    
    // Add addition button handler
    document.getElementById('addAdditionBtn').addEventListener('click', function() {
        addAdditionModal.show();
    });
    
    // Add deduction button handler
    document.getElementById('addDeductionBtn').addEventListener('click', function() {
        addDeductionModal.show();
    });
    
    // Addition type select change handler
    document.getElementById('additionTypeSelect').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const defaultAmount = selectedOption.dataset.defaultAmount || 0;
        document.getElementById('additionAmount').value = defaultAmount;
    });
    
    // Deduction type select change handler
    document.getElementById('deductionTypeSelect').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const defaultAmount = selectedOption.dataset.defaultAmount || 0;
        document.getElementById('deductionAmount').value = defaultAmount;
    });
    
    // Confirm add addition
    document.getElementById('confirmAddAddition').addEventListener('click', function() {
        const typeSelect = document.getElementById('additionTypeSelect');
        const amount = document.getElementById('additionAmount').value;
        const notes = document.getElementById('additionNotes').value;
        
        if (typeSelect.value && amount) {
            addLineItem('addition', typeSelect.value, typeSelect.options[typeSelect.selectedIndex].text, amount, notes);
            addAdditionModal.hide();
            
            // Reset form
            document.getElementById('addAdditionForm').reset();
        }
    });
    
    // Confirm add deduction
    document.getElementById('confirmAddDeduction').addEventListener('click', function() {
        const typeSelect = document.getElementById('deductionTypeSelect');
        const amount = document.getElementById('deductionAmount').value;
        const notes = document.getElementById('deductionNotes').value;
        
        if (typeSelect.value && amount) {
            addLineItem('deduction', typeSelect.value, typeSelect.options[typeSelect.selectedIndex].text, amount, notes);
            addDeductionModal.hide();
            
            // Reset form
            document.getElementById('addDeductionForm').reset();
        }
    });
    
    function addLineItem(type, typeId, typeName, amount, notes) {
        lineItemCounter++;
        
        const container = type === 'addition' ? 
            document.getElementById('additionalEarnings') :
            document.getElementById('deductionsContainer');
        
        const div = document.createElement('div');
        div.className = 'border rounded p-3 mb-3 line-item';
        div.dataset.type = type;
        div.dataset.typeId = typeId;
        div.innerHTML = `
            <div class="row align-items-center">
                <div class="col-4">
                    <strong>${typeName}</strong>
                    ${notes ? `<br><small class="text-muted">${notes}</small>` : ''}
                </div>
                <div class="col-4">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text">RM</span>
                        <input type="number" step="0.01" class="form-control line-item-amount" 
                               name="line_items[${lineItemCounter}][amount]" value="${amount}">
                    </div>
                </div>
                <div class="col-4 text-end">
                    <button type="button" class="btn btn-outline-danger btn-sm remove-line-item">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
            <input type="hidden" name="line_items[${lineItemCounter}][type_id]" value="${typeId}">
            <input type="hidden" name="line_items[${lineItemCounter}][notes]" value="${notes}">
        `;
        
        container.appendChild(div);
        
        // Add remove functionality
        div.querySelector('.remove-line-item').addEventListener('click', function() {
            div.remove();
            calculatePayroll();
            updateMessages();
        });
        
        // Add amount change listener
        div.querySelector('.line-item-amount').addEventListener('input', calculatePayroll);
        
        calculatePayroll();
        updateMessages();
    }
    
    function updateMessages() {
        const additionsContainer = document.getElementById('additionalEarnings');
        const deductionsContainer = document.getElementById('deductionsContainer');
        
        document.getElementById('noAdditionsMessage').style.display = 
            additionsContainer.children.length > 0 ? 'none' : 'block';
        
        document.getElementById('noDeductionsMessage').style.display = 
            deductionsContainer.children.length > 0 ? 'none' : 'block';
    }
    
    function calculatePayroll() {
        const baseSalary = parseFloat(baseSalaryInput.value || 0);
        const workedMonths = parseFloat(workedMonthsInput.value || 1);
        
        // Calculate prorated base salary
        const actualBaseSalary = baseSalary * workedMonths;
        
        // Calculate additional earnings
        let totalAdditions = 0;
        document.querySelectorAll('.line-item[data-type="addition"] .line-item-amount').forEach(input => {
            totalAdditions += parseFloat(input.value || 0);
        });
        
        // Get expense claims amount (treated as addition/reimbursement)
        const expenseClaimsAmount = parseFloat(document.getElementById('expenseClaimsAmount')?.value || 0);
        totalAdditions += expenseClaimsAmount;
        
        // Calculate custom deductions
        let totalCustomDeductions = 0;
        document.querySelectorAll('.line-item[data-type="deduction"] .line-item-amount').forEach(input => {
            totalCustomDeductions += parseFloat(input.value || 0);
        });
        
        const grossPay = actualBaseSalary + totalAdditions;
        
        // Estimate statutory deductions (simplified)
        const estimatedEPF = grossPay * 0.11; // 11%
        const estimatedSOCSO = Math.min(grossPay * 0.005, 19.75); // Max RM19.75
        const estimatedEIS = Math.min(grossPay * 0.002, 19.75); // Max RM19.75
        const estimatedTax = Math.max(0, (grossPay * 12 - 9000) * 0.01 / 12); // Simplified
        
        const totalStatutoryDeductions = estimatedEPF + estimatedSOCSO + estimatedEIS + estimatedTax;
        const totalDeductions = totalStatutoryDeductions + totalCustomDeductions;
        const netPay = grossPay - totalDeductions;
        
        // Employer contributions
        const employerEPF = grossPay * 0.12; // 12%
        const employerSOCSO = Math.min(grossPay * 0.0175, 24.75); // Max RM24.75
        const employerEIS = Math.min(grossPay * 0.002, 19.75); // Max RM19.75
        const companyContribution = employerEPF + employerSOCSO + employerEIS;
        
        // Update displays
        document.getElementById('basicPayDisplay').textContent = formatCurrency(actualBaseSalary);
        document.getElementById('grossPayDisplay').textContent = formatCurrency(grossPay);
        document.getElementById('netPayDisplay').textContent = formatCurrency(netPay);
        document.getElementById('companyContributionDisplay').textContent = formatCurrency(companyContribution);
        
        // Update additional earnings display
        const additionsDisplay = document.getElementById('additionalEarningsDisplay');
        if (totalAdditions > 0) {
            additionsDisplay.style.display = 'block';
            let additionsHTML = `<div class="text-muted small mb-1">Additional earnings</div>`;
            
            // Show expense claims separately if present
            if (expenseClaimsAmount > 0) {
                additionsHTML += `
                    <div class="row mb-1">
                        <div class="col-7">Expense Claims</div>
                        <div class="col-5 text-end">${formatCurrency(expenseClaimsAmount)}</div>
                    </div>
                `;
            }
            
            // Show other additions if present
            const otherAdditions = totalAdditions - expenseClaimsAmount;
            if (otherAdditions > 0) {
                additionsHTML += `
                    <div class="row mb-1">
                        <div class="col-7">Other Allowances</div>
                        <div class="col-5 text-end">${formatCurrency(otherAdditions)}</div>
                    </div>
                `;
            }
            
            additionsDisplay.innerHTML = additionsHTML;
        } else {
            additionsDisplay.style.display = 'none';
        }
        
        // Update deductions display
        const deductionsDisplay = document.getElementById('deductionsDisplay');
        deductionsDisplay.innerHTML = `
            <div class="text-muted small mb-1">Deductions</div>
            <div class="row mb-1">
                <div class="col-7">EPF (11%)</div>
                <div class="col-5 text-end">RM ${estimatedEPF.toFixed(2)}</div>
            </div>
            <div class="row mb-1">
                <div class="col-7">SOCSO</div>
                <div class="col-5 text-end">RM ${estimatedSOCSO.toFixed(2)}</div>
            </div>
            <div class="row mb-1">
                <div class="col-7">EIS</div>
                <div class="col-5 text-end">RM ${estimatedEIS.toFixed(2)}</div>
            </div>
            <div class="row mb-1">
                <div class="col-7">Income Tax</div>
                <div class="col-5 text-end">RM ${estimatedTax.toFixed(2)}</div>
            </div>
            ${totalCustomDeductions > 0 ? `
                <div class="row mb-1">
                    <div class="col-7">Other Deductions</div>
                    <div class="col-5 text-end">RM ${totalCustomDeductions.toFixed(2)}</div>
                </div>
            ` : ''}
        `;
    }
    
    function formatCurrency(amount) {
        return 'RM ' + parseFloat(amount || 0).toLocaleString('en-MY', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }
    
    // Clear amount function
    window.clearAmount = function(button) {
        const lineItem = button.closest('.line-item');
        const amountInput = lineItem.querySelector('.line-item-amount');
        amountInput.value = '';
        calculatePayroll();
    }
    
    // Handle expense claims for selected employee
    function handleExpenseClaims(employeeId) {
        const claims = employeeClaims[employeeId];
        const noClaimsMessage = document.getElementById('noClaimsMessage');
        const claimsDetails = document.getElementById('claimsDetails');
        const claimsCount = document.getElementById('claimsCount');
        const expenseClaimsAmount = document.getElementById('expenseClaimsAmount');
        const expenseClaimsData = document.getElementById('expenseClaimsData');
        
        if (claims && claims.total > 0) {
            noClaimsMessage.style.display = 'none';
            claimsDetails.style.display = 'block';
            claimsCount.textContent = claims.count + ' claim' + (claims.count > 1 ? 's' : '');
            claimsCount.classList.remove('bg-info');
            claimsCount.classList.add('bg-success');
            expenseClaimsAmount.value = claims.total;
            expenseClaimsData.value = JSON.stringify(claims.claims);
            
            // Update modal content
            const modalContent = document.getElementById('claimsModalContent');
            let claimsTable = `
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Claim #</th>
                            <th>Date</th>
                            <th>Title</th>
                            <th>Category</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            claims.claims.forEach(claim => {
                claimsTable += `
                    <tr>
                        <td>${claim.claim_number}</td>
                        <td>${new Date(claim.expense_date).toLocaleDateString()}</td>
                        <td>${claim.title}</td>
                        <td>${claim.category}</td>
                        <td class="text-end">RM ${parseFloat(claim.amount).toFixed(2)}</td>
                    </tr>
                `;
            });
            
            claimsTable += `
                    </tbody>
                    <tfoot>
                        <tr class="fw-bold">
                            <td colspan="4">Total</td>
                            <td class="text-end">RM ${claims.total.toFixed(2)}</td>
                        </tr>
                    </tfoot>
                </table>
            `;
            
            modalContent.innerHTML = claimsTable;
        } else {
            noClaimsMessage.style.display = 'block';
            claimsDetails.style.display = 'none';
            claimsCount.textContent = '0 claims';
            claimsCount.classList.remove('bg-success');
            claimsCount.classList.add('bg-info');
            expenseClaimsAmount.value = 0;
            expenseClaimsData.value = '';
        }
        
        calculatePayroll();
    }
    
    // Add event listeners for real-time calculation
    baseSalaryInput.addEventListener('input', calculatePayroll);
    workedMonthsInput.addEventListener('input', calculatePayroll);
    
    // Add listeners to all pre-populated amount inputs
    document.querySelectorAll('.line-item-amount').forEach(input => {
        input.addEventListener('input', calculatePayroll);
    });
    
    // Initial calculation
    calculatePayroll();
    updateMessages();
});
</script>
@endpush
@endsection