@extends('layouts.app')

@section('title', 'Edit Overtime Rule')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Edit Overtime Rule</h5>
                <a href="{{ route('overtime-rules.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left me-1"></i> Back
                </a>
            </div>
            <form action="{{ route('overtime-rules.update', $overtimeRule) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="rule_name" class="form-label">Rule Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('rule_name') is-invalid @enderror" id="rule_name" name="rule_name" value="{{ old('rule_name', $overtimeRule->rule_name) }}" required>
                            @error('rule_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="calculation_type" class="form-label">Calculation Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('calculation_type') is-invalid @enderror" id="calculation_type" name="calculation_type" required>
                                <option value="">Select Type</option>
                                <option value="per_hour" {{ old('calculation_type', $overtimeRule->calculation_type) == 'per_hour' ? 'selected' : '' }}>Per Hour</option>
                                <option value="threshold" {{ old('calculation_type', $overtimeRule->calculation_type) == 'threshold' ? 'selected' : '' }}>Threshold</option>
                                <option value="percentage" {{ old('calculation_type', $overtimeRule->calculation_type) == 'percentage' ? 'selected' : '' }}>Percentage of Salary</option>
                                <option value="tiered" {{ old('calculation_type', $overtimeRule->calculation_type) == 'tiered' ? 'selected' : '' }}>Tiered</option>
                            </select>
                            @error('calculation_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="effective_date" class="form-label">Effective Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('effective_date') is-invalid @enderror" id="effective_date" name="effective_date" value="{{ old('effective_date', $overtimeRule->effective_date->format('Y-m-d')) }}" required>
                            @error('effective_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3" id="rate_amount_field">
                            <label for="rate_amount" class="form-label">Rate Amount (Rp)</label>
                            <input type="number" step="0.01" class="form-control @error('rate_amount') is-invalid @enderror" id="rate_amount" name="rate_amount" value="{{ old('rate_amount', $overtimeRule->rate_amount) }}">
                            @error('rate_amount')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3" id="threshold_minutes_field">
                            <label for="threshold_minutes" class="form-label">Threshold Minutes</label>
                            <input type="number" class="form-control @error('threshold_minutes') is-invalid @enderror" id="threshold_minutes" name="threshold_minutes" value="{{ old('threshold_minutes', $overtimeRule->threshold_minutes) }}">
                            @error('threshold_minutes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3" id="percentage_rate_field">
                            <label for="percentage_rate" class="form-label">Percentage Rate (%)</label>
                            <input type="number" step="0.01" class="form-control @error('percentage_rate') is-invalid @enderror" id="percentage_rate" name="percentage_rate" value="{{ old('percentage_rate', $overtimeRule->percentage_rate) }}">
                            @error('percentage_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3" id="tier_json_field">
                            <label for="tier_json" class="form-label">Tier Configuration (JSON)</label>
                            <textarea class="form-control @error('tier_json') is-invalid @enderror" id="tier_json" name="tier_json" rows="3">{{ old('tier_json', $overtimeRule->tier_json ? json_encode($overtimeRule->tier_json) : '') }}</textarea>
                            <small class="text-muted">Example: {"1": 20000, "2": 25000, "3": 30000}</small>
                            @error('tier_json')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                            <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                <option value="1" {{ old('status', $overtimeRule->status) == '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ old('status', $overtimeRule->status) == '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <a href="{{ route('overtime-rules.index') }}" class="btn btn-outline-secondary me-2">Cancel</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i> Update Rule
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('calculation_type').addEventListener('change', function() {
        const type = this.value;
        document.getElementById('rate_amount_field').style.display = 'none';
        document.getElementById('threshold_minutes_field').style.display = 'none';
        document.getElementById('percentage_rate_field').style.display = 'none';
        document.getElementById('tier_json_field').style.display = 'none';

        if (type === 'per_hour') {
            document.getElementById('rate_amount_field').style.display = 'block';
        } else if (type === 'threshold') {
            document.getElementById('rate_amount_field').style.display = 'block';
            document.getElementById('threshold_minutes_field').style.display = 'block';
        } else if (type === 'percentage') {
            document.getElementById('percentage_rate_field').style.display = 'block';
        } else if (type === 'tiered') {
            document.getElementById('tier_json_field').style.display = 'block';
        }
    });

    document.getElementById('calculation_type').dispatchEvent(new Event('change'));
</script>
@endpush