@extends('layouts.template.main')

@section('content')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon">
                                    <i data-feather="settings"></i>
                                </div>
                                Quản lý cấu hình
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content -->
        <div class="container-xl px-4 mt-4">
            @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" aria-label="Close"></button>
                </div>
            @endif

            @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" aria-label="Close"></button>
                </div>
            @endif

            <form action="{{ route('penalty_configs.update') }}" method="POST" id="penaltyConfigForm">
                @csrf
                @method('PUT')

                {{-- Các mức phạt tiền --}}
                <div class="row mb-4">
                    <div class="col-xl-12">
                        <div class="card mb-4">
                            <div class="card-header bg-primary text-white">
                                <i data-feather="dollar-sign" class="me-2"></i>
                                Các mức phạt tiền đi muộn/về sớm
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    @php
                                        $amountConfigs = $groupedConfigs['amount'] ?? collect();
                                        // Sắp xếp theo thứ tự logic: từ nhỏ đến lớn
                                        $lateFine5_15 = $amountConfigs->firstWhere('key', 'late_fine_5_15_minutes');
                                        $lateFine15_30 = $amountConfigs->firstWhere('key', 'late_fine_15_30_minutes');
                                        $lateFine30_plus = $amountConfigs->firstWhere('key', 'late_fine_30_plus_minutes');
                                        $forgotPunch = $amountConfigs->firstWhere('key', 'forgot_punch_fine');
                                    @endphp
                                    
                                    {{-- Phạt đi muộn/về sớm từ 5-15 phút --}}
                                    @if($lateFine5_15)
                                        <div class="col-md-6 col-lg-6">
                                            <label for="config_{{ $lateFine5_15->id }}" class="form-label">
                                                {{ $lateFine5_15->description }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <input 
                                                    type="number" 
                                                    class="form-control" 
                                                    id="config_{{ $lateFine5_15->id }}" 
                                                    name="configs[{{ $lateFine5_15->id }}][value]" 
                                                    value="{{ $lateFine5_15->value }}" 
                                                    min="0" 
                                                    step="1000"
                                                    required
                                                >
                                                <span class="input-group-text">VNĐ</span>
                                            </div>
                                            <input type="hidden" name="configs[{{ $lateFine5_15->id }}][id]" value="{{ $lateFine5_15->id }}">
                                            <small class="text-muted">Key: {{ $lateFine5_15->key }}</small>
                                        </div>
                                    @endif
                                    
                                    {{-- Phạt đi muộn/về sớm từ 15-30 phút --}}
                                    @if($lateFine15_30)
                                        <div class="col-md-6 col-lg-6">
                                            <label for="config_{{ $lateFine15_30->id }}" class="form-label">
                                                {{ $lateFine15_30->description }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <input 
                                                    type="number" 
                                                    class="form-control" 
                                                    id="config_{{ $lateFine15_30->id }}" 
                                                    name="configs[{{ $lateFine15_30->id }}][value]" 
                                                    value="{{ $lateFine15_30->value }}" 
                                                    min="0" 
                                                    step="1000"
                                                    required
                                                >
                                                <span class="input-group-text">VNĐ</span>
                                            </div>
                                            <input type="hidden" name="configs[{{ $lateFine15_30->id }}][id]" value="{{ $lateFine15_30->id }}">
                                            <small class="text-muted">Key: {{ $lateFine15_30->key }}</small>
                                        </div>
                                    @endif
                                    
                                    {{-- Phạt đi muộn/về sớm từ 30 phút trở lên --}}
                                    @if($lateFine30_plus)
                                        <div class="col-md-6 col-lg-6">
                                            <label for="config_{{ $lateFine30_plus->id }}" class="form-label">
                                                {{ $lateFine30_plus->description }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <input 
                                                    type="number" 
                                                    class="form-control" 
                                                    id="config_{{ $lateFine30_plus->id }}" 
                                                    name="configs[{{ $lateFine30_plus->id }}][value]" 
                                                    value="{{ $lateFine30_plus->value }}" 
                                                    min="0" 
                                                    step="1000"
                                                    required
                                                >
                                                <span class="input-group-text">VNĐ</span>
                                            </div>
                                            <input type="hidden" name="configs[{{ $lateFine30_plus->id }}][id]" value="{{ $lateFine30_plus->id }}">
                                            <small class="text-muted">Key: {{ $lateFine30_plus->key }}</small>
                                        </div>
                                    @endif
                                    
                                    {{-- Phạt quên chấm công --}}
                                    @if($forgotPunch)
                                        <div class="col-md-6 col-lg-6">
                                            <label for="config_{{ $forgotPunch->id }}" class="form-label">
                                                {{ $forgotPunch->description }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <input 
                                                    type="number" 
                                                    class="form-control" 
                                                    id="config_{{ $forgotPunch->id }}" 
                                                    name="configs[{{ $forgotPunch->id }}][value]" 
                                                    value="{{ $forgotPunch->value }}" 
                                                    min="0" 
                                                    step="1000"
                                                    required
                                                >
                                                <span class="input-group-text">VNĐ</span>
                                            </div>
                                            <input type="hidden" name="configs[{{ $forgotPunch->id }}][id]" value="{{ $forgotPunch->id }}">
                                            <small class="text-muted">Key: {{ $forgotPunch->key }}</small>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Số lần được miễn phí --}}
                <div class="row mb-4">
                    <div class="col-xl-12">
                        <div class="card mb-4">
                            <div class="card-header bg-info text-white">
                                <i data-feather="shield" class="me-2"></i>
                                Số lần được miễn phí
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    @php
                                        $countConfigs = $groupedConfigs['count'] ?? collect();
                                        $freeConfigs = $countConfigs->whereIn('key', ['max_forgot_free', 'max_late_early_free', 'late_early_day_penalty_threshold']);
                                    @endphp
                                    @foreach($freeConfigs as $config)
                                        <div class="col-md-6 col-lg-4">
                                            <label for="config_{{ $config->id }}" class="form-label">
                                                {{ $config->description }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <input 
                                                type="number" 
                                                class="form-control" 
                                                id="config_{{ $config->id }}" 
                                                name="configs[{{ $config->id }}][value]" 
                                                value="{{ $config->value }}" 
                                                min="0" 
                                                required
                                            >
                                            <input type="hidden" name="configs[{{ $config->id }}][id]" value="{{ $config->id }}">
                                            <small class="text-muted">Key: {{ $config->key }}</small>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Khung giờ nghỉ trưa --}}
                <div class="row mb-4">
                    <div class="col-xl-12">
                        <div class="card mb-4">
                            <div class="card-header bg-warning text-dark">
                                <i data-feather="clock" class="me-2"></i>
                                Khung giờ nghỉ trưa
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    @php
                                        $timeConfigs = $groupedConfigs['time'] ?? collect();
                                        $lunchStart = $timeConfigs->firstWhere('key', 'lunch_start_time');
                                        $lunchEnd = $timeConfigs->firstWhere('key', 'lunch_end_time');
                                    @endphp
                                    
                                    {{-- Giờ bắt đầu nghỉ trưa --}}
                                    @if($lunchStart)
                                        <div class="col-md-6">
                                            <label for="config_{{ $lunchStart->id }}" class="form-label">
                                                {{ $lunchStart->description }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <input 
                                                type="time" 
                                                class="form-control" 
                                                id="config_{{ $lunchStart->id }}" 
                                                name="configs[{{ $lunchStart->id }}][value]" 
                                                value="{{ $lunchStart->value }}" 
                                                required
                                            >
                                            <input type="hidden" name="configs[{{ $lunchStart->id }}][id]" value="{{ $lunchStart->id }}">
                                            <small class="text-muted">Key: {{ $lunchStart->key }}</small>
                                        </div>
                                    @endif
                                    
                                    {{-- Giờ kết thúc nghỉ trưa --}}
                                    @if($lunchEnd)
                                        <div class="col-md-6">
                                            <label for="config_{{ $lunchEnd->id }}" class="form-label">
                                                {{ $lunchEnd->description }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <input 
                                                type="time" 
                                                class="form-control" 
                                                id="config_{{ $lunchEnd->id }}" 
                                                name="configs[{{ $lunchEnd->id }}][value]" 
                                                value="{{ $lunchEnd->value }}" 
                                                required
                                            >
                                            <input type="hidden" name="configs[{{ $lunchEnd->id }}][id]" value="{{ $lunchEnd->id }}">
                                            <small class="text-muted">Key: {{ $lunchEnd->key }}</small>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Giờ làm việc tối thiểu --}}
                <div class="row mb-4">
                    <div class="col-xl-12">
                        <div class="card mb-4">
                            <div class="card-header bg-success text-white">
                                <i data-feather="activity" class="me-2"></i>
                                Giờ làm việc và hệ số OT
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    @php
                                        $hoursConfigs = $groupedConfigs['hours'] ?? collect();
                                        $workingHoursConfigs = $hoursConfigs->whereIn('key', ['minimum_working_hours']);
                                    @endphp
                                    @foreach($workingHoursConfigs as $config)
                                        <div class="col-md-6">
                                            <label for="config_{{ $config->id }}" class="form-label">
                                                {{ $config->description }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <input 
                                                    type="number" 
                                                    class="form-control" 
                                                    id="config_{{ $config->id }}" 
                                                    name="configs[{{ $config->id }}][value]" 
                                                    value="{{ $config->value }}" 
                                                    min="0" 
                                                    max="24"
                                                    step="0.5"
                                                    required
                                                >
                                                <span class="input-group-text">giờ</span>
                                            </div>
                                            <input type="hidden" name="configs[{{ $config->id }}][id]" value="{{ $config->id }}">
                                            <small class="text-muted">Key: {{ $config->key }}</small>
                                        </div>
                                    @endforeach

                                    @php
                                        $hoursConfigs = $groupedConfigs['count'] ?? collect();
                                        $workingHoursConfigs = $hoursConfigs->whereIn('key', ['ot_coefficient']);
                                    @endphp
                                    @foreach($workingHoursConfigs as $config)
                                        <div class="col-md-6">
                                            <label for="config_{{ $config->id }}" class="form-label">
                                                {{ $config->description }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                <input 
                                                    type="number" 
                                                    class="form-control" 
                                                    id="config_{{ $config->id }}" 
                                                    name="configs[{{ $config->id }}][value]" 
                                                    value="{{ $config->value }}" 
                                                    min="0" 
                                                    max="24"
                                                    step="0.5"
                                                    required
                                                >
                                                <span class="input-group-text">X</span>
                                            </div>
                                            <input type="hidden" name="configs[{{ $config->id }}][id]" value="{{ $config->id }}">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Nút lưu --}}
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('attendance_list') }}" class="btn btn-secondary">
                                        <i data-feather="arrow-left" class="me-1"></i>
                                        Quay lại
                                    </a>
                                    <button type="submit" class="btn btn-primary" onclick="return confirm('Bạn có chắc chắn muốn cập nhật các cấu hình  này?')">
                                        <i data-feather="save" class="me-1"></i>
                                        Lưu
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </main>
@endsection

@section('scripts')
    <script>
        // Format số tiền khi nhập
        document.querySelectorAll('input[type="number"][step="1000"]').forEach(input => {
            input.addEventListener('blur', function() {
                if (this.value) {
                    this.value = Math.round(this.value / 1000) * 1000;
                }
            });
        });
    </script>
@endsection