@extends('backend.layouts.app')
@section('title', _trans('payroll.Employee Adjustments'))

@section('content')
    {!! breadcrumb([
        'title' => _trans('payroll.Employee Adjustments'),
        route('admin.dashboard') => _trans('common.Dashboard'),
        '' => _trans('common.Payroll'),
        '#' => _trans('payroll.Employee Adjustments'),
    ]) !!}

    <div class="table-content table-basic">
        <div class="card">
            <div class="card-body">
                {{-- Selector de Empleado --}}
                <div class="row mb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            <i class="fa-solid fa-user-pen me-1"></i>
                            {{ _trans('payroll.Select Employee') }}
                        </label>
                        <select id="employee_selector" class="form-select select2"
                            onchange="loadEmployeeAdjustments(this.value)">
                            <option value="">{{ _trans('payroll.Search employee by name or code') }}</option>
                            @foreach ($employees as $emp)
                                <option value="{{ $emp->id }}"
                                    {{ (int) request('employee_id') === $emp->id ? 'selected' : '' }}>
                                    {{ $emp->employee_id ? '#' . $emp->employee_id . ' — ' : '' }}{{ $emp->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Info del empleado seleccionado --}}
                    <div class="col-md-6" id="employee-info-panel" style="display: none;">
                        <div class="border rounded p-3 bg-light h-100">
                            <div class="row">
                                <div class="col-6">
                                    <small class="text-muted d-block">{{ _trans('common.Department') }}</small>
                                    <strong id="emp-department">—</strong>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted d-block">{{ _trans('common.Designation') }}</small>
                                    <strong id="emp-designation">—</strong>
                                </div>
                                <div class="col-6 mt-2">
                                    <small class="text-muted d-block">{{ _trans('payroll.Base Salary') }}</small>
                                    <strong id="emp-salary" class="text-success">—</strong>
                                </div>
                                <div class="col-6 mt-2">
                                    <small class="text-muted d-block">{{ _trans('payroll.Type') }}</small>
                                    <strong id="emp-payslip-type">—</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Contenedor de ajustes (se carga por AJAX) --}}
                <div id="adjustments-container">
                    @if (request('employee_id'))
                        @include('backend.payroll.adjustments.partials.employee_adjustments')
                    @else
                        <div class="text-center py-5">
                            <i class="fa-solid fa-sliders fa-3x text-muted mb-3 d-block"></i>
                            <p class="text-muted">{{ _trans('payroll.Select Employee') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    // Define pagination() para que __modal.min.js recargue los ajustes tras guardar
    var page = 1;
    function pagination() {
        var empId = document.getElementById('employee_selector').value;
        if (empId) loadEmployeeAdjustments(empId);
    }

    function loadEmployeeAdjustments(employeeId) {
        if (!employeeId) {
            document.getElementById('adjustments-container').innerHTML =
                '<div class="text-center py-5"><i class="fa-solid fa-sliders fa-3x text-muted mb-3 d-block"></i><p class="text-muted">{{ _trans("payroll.Select Employee") }}</p></div>';
            document.getElementById('employee-info-panel').style.display = 'none';
            return;
        }

        // Cargar data del empleado via AJAX
        fetch(`{{ url('hrm/payroll/adjustments/employee-data') }}/${employeeId}`)
            .then(r => r.json())
            .then(data => {
                if (data.employee) {
                    document.getElementById('emp-department').textContent = data.employee.department || '—';
                    document.getElementById('emp-designation').textContent = data.employee.designation || '—';
                    document.getElementById('emp-salary').textContent = '$' + parseFloat(data.employee.basic_salary).toFixed(2);
                    document.getElementById('emp-payslip-type').textContent = data.employee.payslip_type_label || '—';
                    document.getElementById('employee-info-panel').style.display = '';
                }
                if (data.html) {
                    document.getElementById('adjustments-container').innerHTML = data.html;
                    // Reinicializar tooltips
                    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function (el) { return new bootstrap.Tooltip(el); });
                }
            })
            .catch(err => {
                console.error('Error loading adjustments:', err);
                document.getElementById('adjustments-container').innerHTML =
                    '<div class="alert alert-danger">Error al cargar datos del empleado.</div>';
            });
    }

    function deleteAdjustment(id) {
        if (!confirm('{{ _trans("common.Are you sure?") }}')) return;

        fetch(`{{ url('hrm/payroll/adjustments/delete') }}/${id}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(data => {
            if (data.result) {
                // Recargar ajustes del empleado actual
                let empId = document.getElementById('employee_selector').value;
                if (empId) loadEmployeeAdjustments(empId);
            } else {
                alert(data.message || 'Error');
            }
        });
    }

    // Si llega con employee_id en URL, cargar info
    document.addEventListener('DOMContentLoaded', function() {
        let empId = document.getElementById('employee_selector').value;
        if (empId) {
            // Solo cargar info panel, el partial ya viene renderizado
            fetch(`{{ url('hrm/payroll/adjustments/employee-data') }}/${empId}`)
                .then(r => r.json())
                .then(data => {
                    if (data.employee) {
                        document.getElementById('emp-department').textContent = data.employee.department || '—';
                        document.getElementById('emp-designation').textContent = data.employee.designation || '—';
                        document.getElementById('emp-salary').textContent = '$' + parseFloat(data.employee.basic_salary).toFixed(2);
                        document.getElementById('emp-payslip-type').textContent = data.employee.payslip_type_label || '—';
                        document.getElementById('employee-info-panel').style.display = '';
                    }
                });
        }
    });
</script>
@endsection