@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-basic-pay') }}" 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['description'] }}</th>
                        @endforeach
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- First Row Template (Empty initially) -->
                    <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['code'] }}][]" placeholder="Enter Value" required>
                                <small class=" text-primary feedback-message"></small> <!-- Feedback Message -->
                            </td>
                        @endforeach
                        <td>
                            <button type="button" class="btn btn-danger remove-row">Remove</button>
                        </td>
                    </tr>

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

                </tbody>
            </table>

            <div class="d-flex justify-content-between align-items-center mt-3">
                <!-- Add Row Button (Left) -->
                <button type="button" class="btn btn-success" id="addRow">Add Row</button>
            
                <!-- Submit Button (Right) -->
                <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(); // Clone the first row
            newRow.find('input').val(''); // Clear the input values in the cloned row
            newRow.find('.employee-name').html(''); // Clear the employee name in the new row
            newRow.find('.feedback-message').text('').removeAttr('style'); // Clear previous messages and color

            $('#dynamicTable tbody').append(newRow); // Add the new row to the table
        });

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

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

            if (manNumber.length >= 4) { // Optional: Trigger after 3 characters are entered
                $.ajax({
                    url: "{{ route('pam-data-capture.get-employee-basic-pay') }}", // This is your backend route
                    type: 'GET',
                    data: { man_number: manNumber , payroll_id : payrollId },
                    success: function(response) {
                        if (response.success) {
                            row.find('.employee-name').text(response.employee_name); // Update employee name column
                        } else {
                            row.find('.employee-name').text(response.message); // Show error if not found
                        }
                    },
                    error: function() {
                        row.find('.employee-name').text('Error Fetching'); // Show error on request failure
                    }
                });
            } else {
                row.find('.employee-name').text(''); // Clear if input is empty
            }
        });
    });

    // 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; // Extract the code from the name attribute

             // Get the closest row and extract the corresponding man_number
            let row = inputField.closest('tr');
            let manNumber = row.querySelector('.man_number').value; // Fetch the man_number from the same row

            // Send AJAX request
            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;

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


                // Update feedback based on the returned data
                feedbackElement.textContent = data.message;

                feedbackElement.style.fontWeight = 'bold'; // Make text bold for emphasis
                feedbackElement.style.color = data.success ? 'blue' : 'red'; // Blue for success, red for error
            })
            .catch(error => console.error('Error:', error));
        }
    });
</script>

@endsection