@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">Pro-rate Settings</h1>
                    <p class="text-muted">{{ $company->name }} - Configure partial month salary calculations for new joiners and leavers</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.payroll-settings.index', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Settings
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Message -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <!-- Pro-rate Settings Form -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Pro-rate Configuration</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('companies.hr.payroll-settings.prorate.update', $company) }}">
                        @csrf
                        @method('PUT')

                        <!-- Basic Pro-rate Method -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Basic Calculation Method</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Pro-rate Method <span class="text-danger">*</span></label>
                                <select class="form-select @error('prorate_method') is-invalid @enderror" 
                                        name="prorate_method" id="prorate_method" required>
                                    <option value="working_days" {{ $settings->prorate_method === 'working_days' ? 'selected' : '' }}>
                                        Working Days (Recommended)
                                    </option>
                                    <option value="calendar_days" {{ $settings->prorate_method === 'calendar_days' ? 'selected' : '' }}>
                                        Calendar Days
                                    </option>
                                </select>
                                @error('prorate_method')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">How pro-rate percentage is calculated</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Working Days per Month <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" step="0.5" min="20" max="31" 
                                           class="form-control @error('standard_working_days_per_month') is-invalid @enderror" 
                                           name="standard_working_days_per_month" 
                                           value="{{ old('standard_working_days_per_month', $settings->standard_working_days_per_month) }}" 
                                           placeholder="26" required>
                                    <span class="input-group-text">days</span>
                                    @error('standard_working_days_per_month')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Standard working days for pro-rate calculations</small>
                            </div>
                        </div>

                        <!-- Day Inclusion Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Day Inclusion</h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="include_weekends_in_prorate" 
                                           id="include_weekends_in_prorate" value="1" 
                                           {{ $settings->include_weekends_in_prorate ? 'checked' : '' }}>
                                    <label class="form-check-label" for="include_weekends_in_prorate">
                                        <i class="bi bi-calendar-week text-info me-1"></i>
                                        <strong>Include Weekends</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Count Saturdays and Sundays as working days</small>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="include_public_holidays_in_prorate" 
                                           id="include_public_holidays_in_prorate" value="1" 
                                           {{ $settings->include_public_holidays_in_prorate ? 'checked' : '' }}>
                                    <label class="form-check-label" for="include_public_holidays_in_prorate">
                                        <i class="bi bi-calendar-event text-warning me-1"></i>
                                        <strong>Include Public Holidays</strong>
                                    </label>
                                </div>
                                <small class="form-text text-muted">Count public holidays as working days</small>
                            </div>
                        </div>

                        <!-- New Joiner Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">New Joiner Pro-rate</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Join Pro-rate Basis <span class="text-danger">*</span></label>
                                <select class="form-select @error('join_prorate_basis') is-invalid @enderror" 
                                        name="join_prorate_basis" id="join_prorate_basis" required>
                                    <option value="actual_days" {{ $settings->join_prorate_basis === 'actual_days' ? 'selected' : '' }}>
                                        Based on actual days worked
                                    </option>
                                    <option value="full_month_if_before_15th" {{ $settings->join_prorate_basis === 'full_month_if_before_15th' ? 'selected' : '' }}>
                                        Full month if joined before cutoff day
                                    </option>
                                    <option value="custom" {{ $settings->join_prorate_basis === 'custom' ? 'selected' : '' }}>
                                        Custom calculation
                                    </option>
                                </select>
                                @error('join_prorate_basis')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Join Cutoff Day <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" min="1" max="31" 
                                           class="form-control @error('join_cutoff_day') is-invalid @enderror" 
                                           name="join_cutoff_day" 
                                           value="{{ old('join_cutoff_day', $settings->join_cutoff_day) }}" 
                                           placeholder="15" required>
                                    <span class="input-group-text">th day</span>
                                    @error('join_cutoff_day')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">If joined before this day, full month salary applies</small>
                            </div>
                        </div>

                        <!-- Leaver Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Leaver Pro-rate</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Leave Pro-rate Basis <span class="text-danger">*</span></label>
                                <select class="form-select @error('leave_prorate_basis') is-invalid @enderror" 
                                        name="leave_prorate_basis" id="leave_prorate_basis" required>
                                    <option value="actual_days" {{ $settings->leave_prorate_basis === 'actual_days' ? 'selected' : '' }}>
                                        Based on actual days worked
                                    </option>
                                    <option value="full_month_if_after_15th" {{ $settings->leave_prorate_basis === 'full_month_if_after_15th' ? 'selected' : '' }}>
                                        Full month if left after cutoff day
                                    </option>
                                    <option value="custom" {{ $settings->leave_prorate_basis === 'custom' ? 'selected' : '' }}>
                                        Custom calculation
                                    </option>
                                </select>
                                @error('leave_prorate_basis')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Leave Cutoff Day <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" min="1" max="31" 
                                           class="form-control @error('leave_cutoff_day') is-invalid @enderror" 
                                           name="leave_cutoff_day" 
                                           value="{{ old('leave_cutoff_day', $settings->leave_cutoff_day) }}" 
                                           placeholder="15" required>
                                    <span class="input-group-text">th day</span>
                                    @error('leave_cutoff_day')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">If left after this day, full month salary applies</small>
                            </div>
                        </div>

                        <!-- Component Pro-rate Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Component Pro-rate Application</h6>
                                <p class="small text-info">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Select which payroll components should be pro-rated for partial months
                                </p>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="prorate_allowances" 
                                                   id="prorate_allowances" value="1" 
                                                   {{ $settings->prorate_allowances ? 'checked' : '' }}>
                                            <label class="form-check-label" for="prorate_allowances">
                                                <i class="bi bi-plus-circle text-success me-1"></i>
                                                <strong>Allowances & Additions</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="prorate_overtime" 
                                                   id="prorate_overtime" value="1" 
                                                   {{ $settings->prorate_overtime ? 'checked' : '' }}>
                                            <label class="form-check-label" for="prorate_overtime">
                                                <i class="bi bi-clock text-warning me-1"></i>
                                                <strong>Overtime Pay</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="prorate_deductions" 
                                                   id="prorate_deductions" value="1" 
                                                   {{ $settings->prorate_deductions ? 'checked' : '' }}>
                                            <label class="form-check-label" for="prorate_deductions">
                                                <i class="bi bi-dash-circle text-danger me-1"></i>
                                                <strong>Deductions</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="prorate_unpaid_leave" 
                                                   id="prorate_unpaid_leave" value="1" 
                                                   {{ $settings->prorate_unpaid_leave ? 'checked' : '' }}>
                                            <label class="form-check-label" for="prorate_unpaid_leave">
                                                <i class="bi bi-calendar-x text-secondary me-1"></i>
                                                <strong>Unpaid Leave</strong>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="prorate_epf" 
                                                   id="prorate_epf" value="1" 
                                                   {{ $settings->prorate_epf ? 'checked' : '' }}>
                                            <label class="form-check-label" for="prorate_epf">
                                                <i class="bi bi-piggy-bank text-success me-1"></i>
                                                <strong>EPF Contributions</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="prorate_socso" 
                                                   id="prorate_socso" value="1" 
                                                   {{ $settings->prorate_socso ? 'checked' : '' }}>
                                            <label class="form-check-label" for="prorate_socso">
                                                <i class="bi bi-hospital text-info me-1"></i>
                                                <strong>SOCSO Contributions</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="prorate_eis" 
                                                   id="prorate_eis" value="1" 
                                                   {{ $settings->prorate_eis ? 'checked' : '' }}>
                                            <label class="form-check-label" for="prorate_eis">
                                                <i class="bi bi-briefcase text-warning me-1"></i>
                                                <strong>EIS Contributions</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="prorate_hrdf" 
                                                   id="prorate_hrdf" value="1" 
                                                   {{ $settings->prorate_hrdf ? 'checked' : '' }}>
                                            <label class="form-check-label" for="prorate_hrdf">
                                                <i class="bi bi-mortarboard text-primary me-1"></i>
                                                <strong>HRDF Levy</strong>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Min/Max Percentages -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Pro-rate Limits</h6>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Minimum Pro-rate Percentage <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" step="0.01" min="0" max="100" 
                                           class="form-control @error('minimum_prorate_percentage') is-invalid @enderror" 
                                           name="minimum_prorate_percentage" 
                                           value="{{ old('minimum_prorate_percentage', $settings->minimum_prorate_percentage) }}" 
                                           placeholder="0.00" required>
                                    <span class="input-group-text">%</span>
                                    @error('minimum_prorate_percentage')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Minimum salary percentage even for very few days</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Maximum Pro-rate Percentage <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" step="0.01" min="0" max="100" 
                                           class="form-control @error('maximum_prorate_percentage') is-invalid @enderror" 
                                           name="maximum_prorate_percentage" 
                                           value="{{ old('maximum_prorate_percentage', $settings->maximum_prorate_percentage) }}" 
                                           placeholder="100.00" required>
                                    <span class="input-group-text">%</span>
                                    @error('maximum_prorate_percentage')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="form-text text-muted">Maximum salary percentage cap</small>
                            </div>
                        </div>

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

        <!-- Pro-rate Calculator & Guidelines -->
        <div class="col-lg-4">
            <!-- Pro-rate Calculator -->
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Pro-rate Calculator</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="calc_salary" value="3000" placeholder="Enter salary">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="calc_start_date">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">End Date</label>
                        <input type="date" class="form-control" id="calc_end_date">
                    </div>
                    <div class="calculation-preview bg-light p-3 rounded">
                        <h6>Pro-rate Preview:</h6>
                        <div id="calc_result">Enter dates to see calculation</div>
                    </div>
                    <button type="button" class="btn btn-primary w-100 mt-2" onclick="calculateProrate()">
                        <i class="bi bi-calculator"></i> Calculate
                    </button>
                </div>
            </div>

            <!-- Malaysian Standards -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Malaysian Pro-rate Standards</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong class="text-primary">Common Practices:</strong>
                        <ul class="small mt-2">
                            <li><strong>Working Days Method:</strong> 26 working days per month</li>
                            <li><strong>15th Day Rule:</strong> Join before 15th = full month</li>
                            <li><strong>Statutory Contributions:</strong> Pro-rate EPF, SOCSO, EIS</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <strong class="text-success">Best Practices:</strong>
                        <ul class="small mt-2">
                            <li>Clear pro-rate policy communication</li>
                            <li>Consistent application across employees</li>
                            <li>Documentation of calculation methods</li>
                            <li>Regular policy reviews</li>
                        </ul>
                    </div>
                    
                    <div>
                        <strong class="text-info">Calculation Examples:</strong>
                        <ul class="small mt-2">
                            <li><strong>Working Days:</strong> Days worked ÷ 26 × 100%</li>
                            <li><strong>Calendar Days:</strong> Days worked ÷ Total month days × 100%</li>
                            <li><strong>15th Rule:</strong> Join 10th = 100%, Join 20th = Pro-rate</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Example Scenarios -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Example Scenarios</h6>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-primary btn-sm w-100 scenario-btn" 
                                    data-scenario="new_joiner_10th">
                                New Joiner (10th of month)
                            </button>
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-warning btn-sm w-100 scenario-btn" 
                                    data-scenario="new_joiner_20th">
                                New Joiner (20th of month)
                            </button>
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-info btn-sm w-100 scenario-btn" 
                                    data-scenario="leaver_10th">
                                Leaver (10th of month)
                            </button>
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-success btn-sm w-100 scenario-btn" 
                                    data-scenario="leaver_20th">
                                Leaver (20th of month)
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set default dates
    const today = new Date();
    const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
    const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    
    document.getElementById('calc_start_date').value = firstDay.toISOString().split('T')[0];
    document.getElementById('calc_end_date').value = lastDay.toISOString().split('T')[0];
    
    // Example scenarios
    const scenarios = {
        new_joiner_10th: {
            start: new Date(today.getFullYear(), today.getMonth(), 10),
            end: lastDay,
            title: 'New Joiner (10th)'
        },
        new_joiner_20th: {
            start: new Date(today.getFullYear(), today.getMonth(), 20),
            end: lastDay,
            title: 'New Joiner (20th)'
        },
        leaver_10th: {
            start: firstDay,
            end: new Date(today.getFullYear(), today.getMonth(), 10),
            title: 'Leaver (10th)'
        },
        leaver_20th: {
            start: firstDay,
            end: new Date(today.getFullYear(), today.getMonth(), 20),
            title: 'Leaver (20th)'
        }
    };
    
    // Scenario buttons
    document.querySelectorAll('.scenario-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const scenario = scenarios[this.dataset.scenario];
            if (scenario) {
                document.getElementById('calc_start_date').value = scenario.start.toISOString().split('T')[0];
                document.getElementById('calc_end_date').value = scenario.end.toISOString().split('T')[0];
                calculateProrate();
            }
        });
    });
});

function calculateProrate() {
    const salary = parseFloat(document.getElementById('calc_salary').value) || 0;
    const startDate = new Date(document.getElementById('calc_start_date').value);
    const endDate = new Date(document.getElementById('calc_end_date').value);
    
    if (!salary || !startDate || !endDate || startDate > endDate) {
        document.getElementById('calc_result').innerHTML = 'Please enter valid salary and dates';
        return;
    }
    
    // Get form settings
    const prorateMethod = document.getElementById('prorate_method').value;
    const standardWorkingDays = parseFloat(document.querySelector('input[name="standard_working_days_per_month"]').value) || 26;
    const includeWeekends = document.getElementById('include_weekends_in_prorate').checked;
    const joinCutoff = parseInt(document.querySelector('input[name="join_cutoff_day"]').value) || 15;
    const leaveCutoff = parseInt(document.querySelector('input[name="leave_cutoff_day"]').value) || 15;
    
    let workedDays = 0;
    let totalDays = 0;
    let percentage = 0;
    
    if (prorateMethod === 'calendar_days') {
        // Calendar days calculation
        const timeDiff = endDate.getTime() - startDate.getTime();
        workedDays = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
        
        const monthStart = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
        const monthEnd = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);
        totalDays = monthEnd.getDate();
        
        percentage = (workedDays / totalDays) * 100;
    } else {
        // Working days calculation
        workedDays = countWorkingDays(startDate, endDate, includeWeekends);
        totalDays = standardWorkingDays;
        percentage = (workedDays / totalDays) * 100;
    }
    
    // Apply min/max limits
    const minPercentage = parseFloat(document.querySelector('input[name="minimum_prorate_percentage"]').value) || 0;
    const maxPercentage = parseFloat(document.querySelector('input[name="maximum_prorate_percentage"]').value) || 100;
    
    percentage = Math.max(minPercentage, Math.min(maxPercentage, percentage));
    
    const proratedSalary = salary * (percentage / 100);
    
    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">Method:</div>
                <div class="col-4">${prorateMethod.replace('_', ' ')}</div>
            </div>
            <div class="row mb-1">
                <div class="col-8">Days Worked:</div>
                <div class="col-4">${workedDays} days</div>
            </div>
            <div class="row mb-1">
                <div class="col-8">Total Days:</div>
                <div class="col-4">${totalDays} days</div>
            </div>
            <div class="row mb-1">
                <div class="col-8">Percentage:</div>
                <div class="col-4">${percentage.toFixed(2)}%</div>
            </div>
            <hr class="my-2">
            <div class="row">
                <div class="col-8"><strong>Pro-rated Salary:</strong></div>
                <div class="col-4"><strong class="text-success">RM${proratedSalary.toFixed(2)}</strong></div>
            </div>
        </div>
    `;
    
    document.getElementById('calc_result').innerHTML = resultHtml;
}

function countWorkingDays(startDate, endDate, includeWeekends) {
    let workingDays = 0;
    const currentDate = new Date(startDate);
    
    while (currentDate <= endDate) {
        const dayOfWeek = currentDate.getDay(); // 0 = Sunday, 6 = Saturday
        
        if (includeWeekends || (dayOfWeek !== 0 && dayOfWeek !== 6)) {
            workingDays++;
        }
        
        currentDate.setDate(currentDate.getDate() + 1);
    }
    
    return workingDays;
}

// Auto-calculate when inputs change
['calc_salary', 'calc_start_date', 'calc_end_date'].forEach(id => {
    document.getElementById(id).addEventListener('change', calculateProrate);
});
</script>
@endpush
@endsection