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

    <!-- Overtime Settings Table -->
    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Overtime Configuration</h5>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="showDisabled">
                    <label class="form-check-label" for="showDisabled">
                        Show disabled
                    </label>
                </div>
            </div>
        </div>
        <div class="card-body">
            @if($overtimeSettings->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Overtime Rule</th>
                                <th>Type & Rate</th>
                                <th>Triggers</th>
                                <th>Statutory</th>
                                <th>Compliance</th>
                                <th>Assigned to</th>
                                <th>Enabled</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($overtimeSettings as $overtime)
                            <tr class="overtime-row {{ !$overtime->is_enabled ? 'table-secondary' : '' }}">
                                <td>
                                    <div>
                                        <strong>{{ $overtime->name }}</strong>
                                        @if($overtime->description)
                                            <br><small class="text-muted">{{ $overtime->description }}</small>
                                        @endif
                                        @if($overtime->ef_fields)
                                            <br><span class="badge bg-info">{{ $overtime->ef_fields }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <span class="badge {{ $overtime->calculation_type === 'hourly_rate' ? 'bg-primary' : ($overtime->calculation_type === 'daily_rate' ? 'bg-success' : 'bg-info') }}">
                                            {{ $overtime->calculation_type_display }}
                                        </span>
                                        <br>
                                        <strong class="text-warning">{{ $overtime->multiplier_display }}</strong>
                                    </div>
                                </td>
                                <td>
                                    <small class="text-muted">{{ $overtime->triggers_display }}</small>
                                </td>
                                <td>
                                    <div class="small">
                                        @if($overtime->epf_applicable)
                                            <span class="badge bg-success me-1">EPF</span>
                                        @endif
                                        @if($overtime->socso_applicable)
                                            <span class="badge bg-info me-1">SOCSO</span>
                                        @endif
                                        @if($overtime->eis_applicable)
                                            <span class="badge bg-warning me-1">EIS</span>
                                        @endif
                                        @if($overtime->tax_applicable)
                                            <span class="badge bg-dark me-1">Tax</span>
                                        @endif
                                        @if(!$overtime->enabled_statutory_items)
                                            <span class="text-muted">None</span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    @if($overtime->isEmploymentActCompliant())
                                        <i class="bi bi-shield-check text-success" title="Employment Act 1955 Compliant"></i>
                                        <small class="text-success">Compliant</small>
                                    @else
                                        <i class="bi bi-exclamation-triangle text-warning" title="Below minimum Employment Act requirements"></i>
                                        <small class="text-warning">Review</small>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge {{ $overtime->assigned_to === 'everyone' ? 'bg-primary' : 'bg-secondary' }}">
                                        {{ ucfirst($overtime->assigned_to) }}
                                    </span>
                                </td>
                                <td>
                                    @if($overtime->is_enabled)
                                        <span class="badge bg-success">
                                            <i class="bi bi-check-circle me-1"></i>Enabled
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="bi bi-x-circle me-1"></i>Disabled
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-info" 
                                                title="Calculate" 
                                                onclick="showOvertimeCalculator({{ $overtime->id }}, '{{ $overtime->name }}', '{{ $overtime->calculation_type }}', {{ $overtime->multiplier }})">
                                            <i class="bi bi-calculator"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                data-bs-toggle="modal" data-bs-target="#editModal{{ $overtime->id }}">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary"
                                                onclick="toggleOvertime({{ $overtime->id }}, {{ $overtime->is_enabled ? 'false' : 'true' }})">
                                            @if($overtime->is_enabled)
                                                <i class="bi bi-eye-slash" title="Disable"></i>
                                            @else
                                                <i class="bi bi-eye" title="Enable"></i>
                                            @endif
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                onclick="deleteOvertime({{ $overtime->id }})">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        Showing {{ $overtimeSettings->firstItem() }} to {{ $overtimeSettings->lastItem() }} of {{ $overtimeSettings->total() }} overtime settings
                    </div>
                    {{ $overtimeSettings->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-clock fs-1 text-muted mb-3"></i>
                    <h5>No overtime settings configured</h5>
                    <p class="text-muted">Set up overtime rates and rules for your employees.</p>
                    <a href="{{ route('companies.hr.payroll-settings.overtime.create', $company) }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> Create First Overtime Rule
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Malaysian Employment Act 1955 Compliance Guide -->
    <div class="card mt-4">
        <div class="card-header">
            <h6 class="card-title mb-0">Malaysian Employment Act 1955 - Overtime Requirements</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="text-center mb-3">
                        <i class="bi bi-clock-history text-primary fs-3 mb-2"></i>
                        <h6>Normal Working Hours</h6>
                        <p class="small text-muted">Maximum 8 hours per day, 48 hours per week</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center mb-3">
                        <i class="bi bi-clock text-warning fs-3 mb-2"></i>
                        <h6>Overtime Rate</h6>
                        <p class="small text-muted">Minimum 1.5x normal hourly rate for overtime work</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center mb-3">
                        <i class="bi bi-calendar-week text-success fs-3 mb-2"></i>
                        <h6>Rest Day Work</h6>
                        <p class="small text-muted">Minimum 1.5x for rest days, 2x for public holidays</p>
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <h6 class="text-muted">Overtime Calculation Methods:</h6>
                    <ul class="list-unstyled small">
                        <li><strong>Hourly Rate:</strong> Monthly salary ÷ (working days × 8 hours)</li>
                        <li><strong>Daily Rate:</strong> Monthly salary ÷ working days per month</li>
                        <li><strong>Monthly Rate:</strong> Based on monthly salary proportion</li>
                        <li><strong>Standard Formula:</strong> Basic rate × overtime multiplier × hours</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h6 class="text-muted">Minimum Overtime Rates:</h6>
                    <ul class="list-unstyled small">
                        <li><strong>Weekdays (after 8 hours):</strong> 1.5x normal rate</li>
                        <li><strong>Rest days:</strong> 1.5x for first 8 hours, 2x thereafter</li>
                        <li><strong>Public holidays:</strong> 2x normal rate</li>
                        <li><strong>Night shift (10pm-6am):</strong> Additional considerations may apply</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Overtime Calculator Modal -->
<div class="modal fade" id="overtimeCalculatorModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Overtime Calculator</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Overtime Rule:</label>
                            <p id="calc-overtime-name" class="fw-bold"></p>
                        </div>
                        <div class="mb-3">
                            <label for="calc-monthly-salary" class="form-label">Monthly Salary (RM)</label>
                            <input type="number" class="form-control" id="calc-monthly-salary" placeholder="Enter monthly salary" value="3000">
                        </div>
                        <div class="mb-3">
                            <label for="calc-overtime-hours" class="form-label">Overtime Hours</label>
                            <input type="number" step="0.5" class="form-control" id="calc-overtime-hours" placeholder="Enter overtime hours" value="2">
                        </div>
                        <div class="mb-3">
                            <label for="calc-working-days" class="form-label">Working Days per Month</label>
                            <input type="number" class="form-control" id="calc-working-days" value="26">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="calculation-result bg-light p-3 rounded">
                            <h6>Calculation Breakdown:</h6>
                            <div id="calc-overtime-result"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="calculateOvertime()">Calculate</button>
            </div>
        </div>
    </div>
</div>

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

let currentOvertime = null;

function showOvertimeCalculator(overtimeId, name, type, multiplier) {
    currentOvertime = { id: overtimeId, name: name, type: type, multiplier: multiplier };
    document.getElementById('calc-overtime-name').textContent = name;
    document.getElementById('calc-monthly-salary').value = '3000';
    document.getElementById('calc-overtime-hours').value = '2';
    document.getElementById('calc-working-days').value = '26';
    
    const modal = new bootstrap.Modal(document.getElementById('overtimeCalculatorModal'));
    modal.show();
    
    calculateOvertime();
}

function calculateOvertime() {
    if (!currentOvertime) return;
    
    const monthlySalary = parseFloat(document.getElementById('calc-monthly-salary').value) || 0;
    const overtimeHours = parseFloat(document.getElementById('calc-overtime-hours').value) || 0;
    const workingDays = parseInt(document.getElementById('calc-working-days').value) || 26;
    const workingHoursPerDay = 8;
    
    // Calculate hourly rate
    const totalMonthlyHours = workingDays * workingHoursPerDay;
    const hourlyRate = monthlySalary / totalMonthlyHours;
    
    // Calculate overtime rate and pay
    const overtimeRate = hourlyRate * currentOvertime.multiplier;
    const overtimePay = overtimeHours * overtimeRate;
    
    const resultHtml = `
        <div class="small">
            <div class="row mb-1">
                <div class="col-8">Monthly Salary:</div>
                <div class="col-4">RM${monthlySalary.toFixed(2)}</div>
            </div>
            <div class="row mb-1">
                <div class="col-8">Working Days:</div>
                <div class="col-4">${workingDays} days</div>
            </div>
            <div class="row mb-1">
                <div class="col-8">Total Monthly Hours:</div>
                <div class="col-4">${totalMonthlyHours} hours</div>
            </div>
            <div class="row mb-1">
                <div class="col-8">Normal Hourly Rate:</div>
                <div class="col-4">RM${hourlyRate.toFixed(4)}</div>
            </div>
            <div class="row mb-1">
                <div class="col-8">Overtime Multiplier:</div>
                <div class="col-4">${currentOvertime.multiplier}x</div>
            </div>
            <div class="row mb-1">
                <div class="col-8">Overtime Hourly Rate:</div>
                <div class="col-4">RM${overtimeRate.toFixed(4)}</div>
            </div>
            <div class="row mb-1">
                <div class="col-8">Overtime Hours:</div>
                <div class="col-4">${overtimeHours} hours</div>
            </div>
            <hr class="my-2">
            <div class="row">
                <div class="col-8"><strong>Total Overtime Pay:</strong></div>
                <div class="col-4"><strong class="text-success">RM${overtimePay.toFixed(2)}</strong></div>
            </div>
            <div class="row">
                <div class="col-8"><strong>Total Pay (Salary + OT):</strong></div>
                <div class="col-4"><strong class="text-primary">RM${(monthlySalary + overtimePay).toFixed(2)}</strong></div>
            </div>
        </div>
    `;
    
    document.getElementById('calc-overtime-result').innerHTML = resultHtml;
}

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

function deleteOvertime(overtimeId) {
    if (confirm('Are you sure you want to delete this overtime setting? This action cannot be undone.')) {
        // TODO: Implement AJAX call to delete overtime
        console.log(`Delete overtime ${overtimeId}`);
    }
}

// Auto-calculate when inputs change
document.addEventListener('DOMContentLoaded', function() {
    ['calc-monthly-salary', 'calc-overtime-hours', 'calc-working-days'].forEach(id => {
        const input = document.getElementById(id);
        if (input) {
            input.addEventListener('input', calculateOvertime);
        }
    });
});
</script>
@endpush
@endsection