@extends('backend.layouts.app')
@section('title', @$data['title'])

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

    <div class="table-content table-basic">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('hrm.payroll_bulk_adjustments.store') }}" method="POST" id="bulkForm">
                    @csrf

                    {{-- Panel de configuración --}}
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">
                                {{ _trans('payroll.Select Income/Deduction Type') }} <span class="text-danger">*</span>
                            </label>
                            <select name="commission_id" id="commission_selector" class="form-select select2" required>
                                <option value="">{{ _trans('common.Select') }}</option>
                                @foreach ($data['commissions'] as $c)
                                    <option value="{{ $c->id }}" data-type="{{ $c->type }}">
                                        {{ $c->type == 1 ? '↗ ' : '↘ ' }}{{ $c->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label fw-semibold">{{ _trans('payroll.Date From') }}</label>
                            <input type="date" name="date_from" id="date_from" class="form-control">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label fw-semibold">{{ _trans('payroll.Date To') }}</label>
                            <input type="date" name="date_to" id="date_to" class="form-control">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label fw-semibold">{{ _trans('payroll.Apply In') }}</label>
                            <select name="fortnight_apply" class="form-select">
                                <option value="3">{{ _trans('payroll.Both Fortnights') }}</option>
                                <option value="1">{{ _trans('payroll.1st Fortnight') }}</option>
                                <option value="2">{{ _trans('payroll.2nd Fortnight') }}</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100" id="btnSave" disabled>
                                <i class="fa-solid fa-floppy-disk me-1"></i>
                                {{ _trans('common.Save') }}
                            </button>
                        </div>
                    </div>

                    {{-- Tabla de empleados --}}
                    <div id="employees-container">
                        <div class="text-center py-5">
                            <i class="fa-solid fa-users fa-3x text-muted mb-3 d-block"></i>
                            <p class="text-muted">{{ _trans('payroll.Select Income/Deduction Type') }}</p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        $('.select2').select2();

        $('#commission_selector').on('change', function() {
            var commissionId = $(this).val();
            if (!commissionId) {
                $('#employees-container').html(
                    '<div class="text-center py-5"><i class="fa-solid fa-users fa-3x text-muted mb-3 d-block"></i><p class="text-muted">{{ _trans("payroll.Select Income/Deduction Type") }}</p></div>'
                );
                $('#btnSave').prop('disabled', true);
                return;
            }

            $('#employees-container').html('<div class="text-center py-4"><i class="fa-solid fa-spinner fa-spin fa-2x"></i></div>');

            $.ajax({
                url: '{{ route("hrm.payroll_bulk_adjustments.load_employees") }}',
                type: 'GET',
                data: { commission_id: commissionId },
                success: function(response) {
                    if (response.employees && response.employees.length > 0) {
                        renderTable(response.employees);
                        $('#btnSave').prop('disabled', false);
                    } else {
                        $('#employees-container').html(
                            '<div class="alert alert-warning">{{ _trans("message.Data not found") }}</div>'
                        );
                        $('#btnSave').prop('disabled', true);
                    }
                },
                error: function() {
                    $('#employees-container').html(
                        '<div class="alert alert-danger">Error al cargar empleados</div>'
                    );
                }
            });
        });
    });

    function renderTable(employees) {
        var html = '<div class="table-responsive">';
        html += '<table class="table table-bordered table-hover align-middle">';
        html += '<thead class="table-light">';
        html += '<tr>';
        html += '<th style="width:50px" class="text-center">N°</th>';
        html += '<th style="width:100px" class="text-center">{{ _trans("common.Code") }}</th>';
        html += '<th>{{ _trans("common.Employee Name") }}</th>';
        html += '<th>{{ _trans("common.Department") }}</th>';
        html += '<th style="width:130px" class="text-center">{{ _trans("payroll.Current Amount") }}</th>';
        html += '<th style="width:150px" class="text-center">{{ _trans("payroll.New Amount") }}</th>';
        html += '</tr>';
        html += '</thead>';
        html += '<tbody>';

        for (var i = 0; i < employees.length; i++) {
            var emp = employees[i];
            var currentBadge = emp.current_amount
                ? '<span class="badge bg-success">$' + emp.current_amount + '</span>'
                : '<span class="text-muted">—</span>';

            html += '<tr>';
            html += '<td class="text-center">' + (i + 1) + '</td>';
            html += '<td class="text-center"><code>' + emp.employee_id + '</code></td>';
            html += '<td>' + emp.name + '</td>';
            html += '<td>' + emp.department + '</td>';
            html += '<td class="text-center">' + currentBadge + '</td>';
            html += '<td>';
            html += '<input type="number" step="0.01" min="0" class="form-control form-control-sm text-end"';
            html += ' name="amounts[' + emp.id + ']"';
            html += ' placeholder="—"';
            html += ' value="' + (emp.current_amount ? emp.current_amount : '') + '">';
            html += '</td>';
            html += '</tr>';
        }

        html += '</tbody>';
        html += '</table>';
        html += '</div>';

        $('#employees-container').html(html);
    }
</script>
@endsection