@extends('layouts.master')

@section('content')
<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">
            <div>{{ $title }}</div>
        </div>
    </div>
</div>

<div class="main-card mb-3 card">
    <div class="card-body">
        <form method="POST" action="{{ route('pam-data-capture.handle-entered-values') }}" id="dataCaptureForm">
            @csrf
            <!-- Table for Selected Earnings -->
            <table class="table table-hover table-striped table-bordered" id="dynamicTable">
                <thead>
                    <tr>
                        <th>Man Number</th>
                        <th>Employee Name</th>
                        @foreach ($selectedEarnings as $earning)
                            <th>{{ $earning->code }} - {{ $earning->short_description }}</th>
                        @endforeach
                        @foreach ($selectedDeductions as $deduction)
                            <th>{{ $deduction->code }} - {{ $deduction->short_description }}</th>
                        @endforeach
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Display retrieved earnings and deductions -->
                    @foreach ($enteredEarnings->groupBy('man_number') as $manNumber => $earnings)
                        <tr class="dynamic-row">
                            <td>
                                <input type="text" class="form-control man_number" name="man_number[]" value="{{ $manNumber }}" required>
                            </td>
                            <td class="employee-name">{{ $earnings->first()->employee_name ?? '' }}</td>

                            @foreach ($selectedEarnings as $earning)
                                <td>
                                    <input type="text" class="form-control value" name="values[{{ $earning->id }}][]" 
                                        value="{{ $earnings->where('earn_def_id', $earning->id)->first()->amount ?? '' }}" 
                                        placeholder="Enter Value" required>
                                </td>
                            @endforeach

                            @foreach ($selectedDeductions as $deduction)
                                <td>
                                    <input type="text" class="form-control value" name="deduction_values[{{ $deduction->id }}][]" 
                                        value="{{ $enteredDeductions->where('man_number', $manNumber)->where('dedu_def_id', $deduction->id)->first()->amount ?? '' }}" 
                                        placeholder="Enter Value" required>
                                </td>
                            @endforeach

                            <td>
                                <button type="button" class="btn btn-danger remove-row">Remove</button>
                            </td>
                        </tr>
                    @endforeach

                    <!-- First Row Template (for new entries) -->
                    <tr class="dynamic-row">
                        <td>
                            <input type="text" class="form-control man_number" name="man_number[]" placeholder="Enter Man Number" required>
                        </td>
                        <td class="employee-name"></td>

                        @foreach ($selectedEarnings as $earning)
                            <td>
                                <input type="text" class="form-control value" name="values[{{ $earning->id }}][]" placeholder="Enter Value" >
                                <small class="text-primary feedback-message"></small>
                            </td>
                        @endforeach

                        @foreach ($selectedDeductions as $deduction)
                            <td>
                                <input type="text" class="form-control value" name="deduction_values[{{ $deduction->id }}][]" placeholder="Enter Value">
                                <small class="text-warning feedback-message"></small>
                            </td>
                        @endforeach

                        <td>
                            <button type="button" class="btn btn-danger remove-row">Remove</button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <input type="hidden" name="payroll_id" value="{{ $payrollId }}">
            <input type="hidden" name="pay_run_id" value="{{ $payRunId }}">

            <div class="d-flex justify-content-between align-items-center mt-3">
                <button type="button" class="btn btn-success" id="addRow">Add Row</button>
                {{-- <button type="submit" class="btn btn-primary">Submit Data</button> --}}
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const payRunId = @json($payRunId);
    const payrollId = @json($payrollId);

    $(document).ready(function() {
        // Add Row Button
        $('#addRow').click(function() {
            var newRow = $('#dynamicTable tbody .dynamic-row:first').clone();
            newRow.find('input').val('');
            newRow.find('.employee-name').html('');
            newRow.find('.feedback-message').text('').removeAttr('style');

            $('#dynamicTable tbody').append(newRow);
        });

        // Remove Row Button
        $(document).on('click', '.remove-row', function() {
            $(this).closest('tr').remove();
        });

        // Fetch employee name when the man number is entered
        $(document).on('input', '.man_number', function() {
            var manNumber = $(this).val();
            var row = $(this).closest('tr');

            if (manNumber.length >= 6) {
                $.ajax({
                    url: "{{ route('pam-data-capture.get-employee-data') }}",
                    type: 'GET',
                    data: { man_number: manNumber, payroll_id: payrollId },
                    success: function(response) {
                        if (response.success) {
                            row.find('.employee-name').text(response.employee_name);
                        } else {
                            row.find('.employee-name').text('Not Found');
                        }
                    },
                    error: function() {
                        row.find('.employee-name').text('Error Fetching');
                    }
                });
            } else {
                row.find('.employee-name').text('');
            }
        });

        // Detect input changes
        document.addEventListener('input', function(event) {
            if (event.target.classList.contains('value')) {
                let inputField = event.target;
                let value = inputField.value;
                let code = inputField.name;

                let row = inputField.closest('tr');
                let manNumber = row.querySelector('.man_number').value;

                fetch("{{ route('pam-data-capture.validate-entry') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        value: value,
                        code: code,
                        pay_run_id: payRunId,
                        man_number: manNumber
                    })
                })
                .then(response => response.json())
                .then(data => {
                    let feedbackElement = inputField.nextElementSibling;

                    if (!feedbackElement || !feedbackElement.classList.contains('feedback-message')) {
                        feedbackElement = document.createElement('small');
                        feedbackElement.classList.add('feedback-message');
                        inputField.parentNode.appendChild(feedbackElement);
                    }

                    feedbackElement.textContent = data.message;
                    feedbackElement.style.fontWeight = 'bold';
                    feedbackElement.style.color = data.success ? 'blue' : 'red';
                })
                .catch(error => console.error('Error:', error));
            }
        });
    });
</script>
@endsection