@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 Overtime Rule</h1>
                    <p class="text-muted">{{ $company->name }} - Create overtime configuration per Malaysian Employment Act 1955</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.payroll-settings.overtime', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Overtime
                    </a>
                </div>
            </div>
        </div>
    </div>

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

                        <!-- Calculation Configuration -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Overtime Calculation</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Calculation Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('calculation_type') is-invalid @enderror" 
                                        name="calculation_type" id="calculation_type" required>
                                    <option value="">Select Type</option>
                                    <option value="hourly_rate" {{ old('calculation_type') === 'hourly_rate' ? 'selected' : '' }}>
                                        Hourly Rate (Most common)
                                    </option>
                                    <option value="daily_rate" {{ old('calculation_type') === 'daily_rate' ? 'selected' : '' }}>
                                        Daily Rate
                                    </option>
                                    <option value="monthly_rate" {{ old('calculation_type') === 'monthly_rate' ? 'selected' : '' }}>
                                        Monthly Rate
                                    </option>
                                </select>
                                @error('calculation_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">How overtime pay is calculated</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Overtime Multiplier <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" step="0.1" min="1" max="10" 
                                           class="form-control @error('multiplier') is-invalid @enderror" 
                                           name="multiplier" value="{{ old('multiplier', '1.5') }}" 
                                           placeholder="1.5" id="multiplier_input" required>
                                    <span class="input-group-text">x</span>
                                    @error('multiplier')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted" id="multiplier_help">
                                    Employment Act 1955 minimum: 1.5x for overtime
                                </small>
                            </div>
                        </div>

                        <!-- Triggers and Conditions -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Overtime Triggers</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Minimum Hours Trigger</label>
                                <div class="input-group">
                                    <input type="number" step="0.5" min="0" max="24" 
                                           class="form-control @error('minimum_hours_trigger') is-invalid @enderror" 
                                           name="minimum_hours_trigger" value="{{ old('minimum_hours_trigger', '8') }}" 
                                           placeholder="8.0">
                                    <span class="input-group-text">hours</span>
                                    @error('minimum_hours_trigger')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Overtime applies after this many hours worked</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Special Days</label>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="apply_to_weekends" 
                                           id="apply_to_weekends" value="1" 
                                           {{ old('apply_to_weekends') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="apply_to_weekends">
                                        Apply to weekends/rest days
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="apply_to_public_holidays" 
                                           id="apply_to_public_holidays" value="1" 
                                           {{ old('apply_to_public_holidays') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="apply_to_public_holidays">
                                        Apply to public holidays
                                    </label>
                                </div>
                                <small class="form-text text-muted">When this overtime rule applies</small>
                            </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 overtime pay
                                </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', true) ? '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', true) ? '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>
                                    <div class="col-6">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="eis_applicable" 
                                                   id="eis_applicable" value="1" 
                                                   {{ old('eis_applicable', true) ? '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 class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="tax_applicable" 
                                                   id="tax_applicable" value="1" 
                                                   {{ old('tax_applicable', true) ? '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>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card bg-light">
                                    <div class="card-body p-3">
                                        <h6 class="small">Malaysian Standard:</h6>
                                        <ul class="small mb-0">
                                            <li><strong>EPF, SOCSO, EIS, Tax:</strong> Usually applicable to overtime pay</li>
                                            <li><strong>Overtime is treated as regular income</strong></li>
                                            <li><strong>Subject to same statutory rates</strong></li>
                                        </ul>
                                    </div>
                                </div>
                            </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 overtime rule 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 overtime rule</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Rule will be available for payroll processing</small>
                            </div>
                        </div>

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

        <!-- Quick Templates & Calculator -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Malaysian Standard Templates</h6>
                </div>
                <div class="card-body">
                    <p class="small text-muted">Click to auto-fill common overtime configurations:</p>
                    
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary btn-sm template-btn" 
                                data-template="standard_overtime">
                            <i class="bi bi-clock me-1"></i> Standard Overtime (1.5x)
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm template-btn" 
                                data-template="rest_day">
                            <i class="bi bi-calendar-week me-1"></i> Rest Day Work (1.5x)
                        </button>
                        <button type="button" class="btn btn-outline-danger btn-sm template-btn" 
                                data-template="public_holiday">
                            <i class="bi bi-calendar-event me-1"></i> Public Holiday (2x)
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm template-btn" 
                                data-template="night_shift">
                            <i class="bi bi-moon me-1"></i> Night Shift (1.5x)
                        </button>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Employment Act 1955 Guide</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong class="text-primary">Normal Working Hours:</strong>
                        <ul class="small mt-2">
                            <li>Maximum 8 hours per day</li>
                            <li>Maximum 48 hours per week</li>
                            <li>6 working days per week</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <strong class="text-warning">Overtime Rates:</strong>
                        <ul class="small mt-2">
                            <li>Minimum 1.5x for overtime</li>
                            <li>Minimum 1.5x for rest days</li>
                            <li>Minimum 2x for public holidays</li>
                        </ul>
                    </div>
                    
                    <div>
                        <strong class="text-success">Best Practices:</strong>
                        <ul class="small mt-2">
                            <li>Apply all statutory contributions</li>
                            <li>Maintain proper records</li>
                            <li>Follow collective agreements</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Overtime Preview</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Monthly Salary (RM)</label>
                        <input type="number" class="form-control" id="preview_salary" value="3000" placeholder="Enter salary">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Overtime Hours</label>
                        <input type="number" step="0.5" class="form-control" id="preview_hours" value="2" placeholder="Enter hours">
                    </div>
                    <div class="calculation-preview bg-light p-3 rounded">
                        <h6>Preview:</h6>
                        <div id="preview_result">Configure overtime rule to see calculation</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const multiplierInput = document.getElementById('multiplier_input');
    const multiplierHelp = document.getElementById('multiplier_help');
    const previewSalary = document.getElementById('preview_salary');
    const previewHours = document.getElementById('preview_hours');
    
    // Malaysian overtime templates
    const templates = {
        standard_overtime: {
            name: 'Standard Overtime',
            description: 'Standard overtime rate as per Employment Act 1955',
            calculation_type: 'hourly_rate',
            multiplier: '1.5',
            minimum_hours_trigger: '8',
            apply_to_weekends: false,
            apply_to_public_holidays: false,
            epf_applicable: true,
            socso_applicable: true,
            eis_applicable: true,
            tax_applicable: true,
            assigned_to: 'everyone'
        },
        rest_day: {
            name: 'Rest Day Work',
            description: 'Overtime rate for rest day work (weekends)',
            calculation_type: 'hourly_rate',
            multiplier: '1.5',
            minimum_hours_trigger: '0',
            apply_to_weekends: true,
            apply_to_public_holidays: false,
            epf_applicable: true,
            socso_applicable: true,
            eis_applicable: true,
            tax_applicable: true,
            assigned_to: 'everyone'
        },
        public_holiday: {
            name: 'Public Holiday Work',
            description: 'Overtime rate for public holiday work (double time)',
            calculation_type: 'hourly_rate',
            multiplier: '2.0',
            minimum_hours_trigger: '0',
            apply_to_weekends: false,
            apply_to_public_holidays: true,
            epf_applicable: true,
            socso_applicable: true,
            eis_applicable: true,
            tax_applicable: true,
            assigned_to: 'everyone'
        },
        night_shift: {
            name: 'Night Shift Overtime',
            description: 'Overtime rate for night shift work (10pm-6am)',
            calculation_type: 'hourly_rate',
            multiplier: '1.5',
            minimum_hours_trigger: '8',
            apply_to_weekends: false,
            apply_to_public_holidays: false,
            epf_applicable: true,
            socso_applicable: true,
            eis_applicable: true,
            tax_applicable: true,
            assigned_to: 'everyone'
        }
    };
    
    function updateMultiplierHelp() {
        const multiplier = parseFloat(multiplierInput.value) || 0;
        
        if (multiplier >= 2.0) {
            multiplierHelp.textContent = 'Double time rate - suitable for public holidays';
            multiplierHelp.className = 'form-text text-success';
        } else if (multiplier >= 1.5) {
            multiplierHelp.textContent = 'Employment Act 1955 compliant - minimum 1.5x rate';
            multiplierHelp.className = 'form-text text-success';
        } else if (multiplier >= 1.0) {
            multiplierHelp.textContent = 'Below Employment Act minimum - consider increasing to 1.5x';
            multiplierHelp.className = 'form-text text-warning';
        } else {
            multiplierHelp.textContent = 'Invalid multiplier - must be at least 1.0x';
            multiplierHelp.className = 'form-text text-danger';
        }
        
        updatePreview();
    }
    
    function updatePreview() {
        const multiplier = parseFloat(multiplierInput.value) || 1.5;
        const salary = parseFloat(previewSalary.value) || 0;
        const hours = parseFloat(previewHours.value) || 0;
        
        if (salary === 0 || hours === 0) {
            document.getElementById('preview_result').innerHTML = 'Enter salary and hours to see preview';
            return;
        }
        
        // Calculate overtime (using standard 26 working days, 8 hours per day)
        const workingDays = 26;
        const workingHoursPerDay = 8;
        const totalMonthlyHours = workingDays * workingHoursPerDay;
        const hourlyRate = salary / totalMonthlyHours;
        const overtimeRate = hourlyRate * multiplier;
        const overtimePay = hours * overtimeRate;
        
        const resultHtml = `
            <div class="small">
                <div class="row mb-1">
                    <div class="col-8">Monthly Salary:</div>
                    <div class="col-4">RM${salary.toFixed(2)}</div>
                </div>
                <div class="row mb-1">
                    <div class="col-8">Hourly Rate:</div>
                    <div class="col-4">RM${hourlyRate.toFixed(4)}</div>
                </div>
                <div class="row mb-1">
                    <div class="col-8">OT Rate (${multiplier}x):</div>
                    <div class="col-4">RM${overtimeRate.toFixed(4)}</div>
                </div>
                <div class="row mb-1">
                    <div class="col-8">OT Hours:</div>
                    <div class="col-4">${hours} hours</div>
                </div>
                <hr class="my-2">
                <div class="row">
                    <div class="col-8"><strong>OT Pay:</strong></div>
                    <div class="col-4"><strong class="text-success">RM${overtimePay.toFixed(2)}</strong></div>
                </div>
            </div>
        `;
        
        document.getElementById('preview_result').innerHTML = resultHtml;
    }
    
    // Event listeners
    multiplierInput.addEventListener('input', updateMultiplierHelp);
    previewSalary.addEventListener('input', updatePreview);
    previewHours.addEventListener('input', updatePreview);
    
    // Template buttons
    document.querySelectorAll('.template-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const templateName = this.dataset.template;
            const template = templates[templateName];
            
            if (template) {
                // Fill form fields
                document.querySelector('input[name="name"]').value = template.name;
                document.querySelector('textarea[name="description"]').value = template.description;
                document.querySelector('select[name="calculation_type"]').value = template.calculation_type;
                document.querySelector('input[name="multiplier"]').value = template.multiplier;
                document.querySelector('input[name="minimum_hours_trigger"]').value = template.minimum_hours_trigger;
                document.querySelector('select[name="assigned_to"]').value = template.assigned_to;
                
                // Set checkboxes
                document.querySelector('input[name="apply_to_weekends"]').checked = template.apply_to_weekends;
                document.querySelector('input[name="apply_to_public_holidays"]').checked = template.apply_to_public_holidays;
                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;
                
                // Update help text and preview
                updateMultiplierHelp();
                
                // Highlight the form
                document.querySelector('.card').scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
    
    // Initial setup
    updateMultiplierHelp();
});
</script>
@endpush
@endsection